Merge branch 'Weaverse:main' into main

Weaverse · Dec 29, 2024 · e72ef6b · e72ef6b
2 parents 48ae277 + e8881bc
commit e72ef6b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/app/components/image.tsx b/app/components/image.tsx
@@ -1,6 +1,6 @@
 import { Image as HydrogenImage } from "@shopify/hydrogen";
 import type { Image as ImageType } from "@shopify/hydrogen/storefront-api-types";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "~/utils/cn";
 
 type Crop = "center" | "top" | "bottom" | "left" | "right";
@@ -29,8 +29,15 @@ export interface ImageProps extends React.ComponentPropsWithRef<"img"> {
 
 export function Image(props: ImageProps) {
   let { className, ...rest } = props;
+  let ref = useRef<HTMLImageElement>(null);
   let [loaded, setLoaded] = useState(false);
 
+  useEffect(() => {
+    if (ref.current?.complete) {
+      setLoaded(true);
+    }
+  }, []);
+
   return (
     <div
       className={cn(
@@ -40,6 +47,7 @@ export function Image(props: ImageProps) {
       )}
     >
       <HydrogenImage
+        ref={ref}
         className={cn(
           "[transition:filter_500ms_cubic-bezier(.4,0,.2,1)]",
           "h-full max-h-full w-full object-cover object-center",

diff --git a/app/components/product/badges.tsx b/app/components/product/badges.tsx
@@ -23,7 +23,7 @@ function Badge({
         borderRadius: `${badgeBorderRadius}px`,
         textTransform: badgeTextTransform,
       }}
-      className={clsx("px-1.5 py-1 uppercase text-sm", className)}
+      className={clsx("px-1.5 py-1 uppercase text-sm leading-none", className)}
     >
       {text}
     </span>