@snowcone-app/ui 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React components for merchandise visualization and customization",
   "keywords": [
     "react",

package/src/composed/HeroProductImage.tsx

@@ -878,6 +878,10 @@ export const HeroProductImage = memo(function HeroProductImage({
   // useEffect runs and overlays prevUrl (showing OLD on top), then prevUrl
   // fades out to reveal NEW again — i.e. the new → old → new flash.
   const [renderedUrl, setRenderedUrl] = useState<string | null>(displayUrl);
+  // `renderedUrl` is set as soon as a URL exists, but the <img> paints nothing
+  // until the render is actually fetched (seconds, on a cold render). Keep the
+  // pulsing skeleton up until the first image has painted.
+  const [firstImageLoaded, setFirstImageLoaded] = useState(false);
   const prevDisplayUrlRef = useRef<string | null>(displayUrl);
   // Fire the L3 "you forgot signMockupUrl" dev hint at most once per component.
   const signHintShownRef = useRef(false);
@@ -972,6 +976,13 @@ export const HeroProductImage = memo(function HeroProductImage({
       style={style}
       data-hero-image="true"
     >
+      {/* Loading skeleton — painted UNDER the <img> so the image covers it the
+          instant it renders, with no state-flush flash. Removed once the first
+          image has loaded; later URL changes crossfade over a visible image. */}
+      {!firstImageLoaded && (
+        <div className="absolute inset-0 bg-muted-foreground/20 animate-pulse" />
+      )}
+
       {/* Current image — shows `renderedUrl`, which the crossfade effect only
           advances after the next image has finished preloading. This prevents
           the new → old → new flash that happened when displayUrl was bound
@@ -990,6 +1001,7 @@ export const HeroProductImage = memo(function HeroProductImage({
           fetchPriority="high"
           onClick={onClick}
           onLoad={() => {
+            setFirstImageLoaded(true);
             if (!onLoadCalledRef.current && onLoad) {
               onLoadCalledRef.current = true;
               onLoad();
@@ -997,6 +1009,7 @@ export const HeroProductImage = memo(function HeroProductImage({
             onUrlGeneratedRef.current?.(renderedUrl);
           }}
           onError={() => {
+            setFirstImageLoaded(true);
             onError?.();
             // Dev-only guidance for the most common signed-shop trap: a mockup
             // <img> that loads an UNSIGNED resolver URL gets a 403 "Missing
@@ -1047,11 +1060,6 @@ export const HeroProductImage = memo(function HeroProductImage({
         />
       )}
 
-      {/* Simple placeholder - shown until we have a URL to render */}
-      {!renderedUrl && (
-        <div className="absolute inset-0 bg-zinc-200" />
-      )}
-
       {/* SAFARI FIX: Disabled shimmer overlay - it depends on layers state which causes re-renders */}
       {/* {showShimmer && layers.length > 0 && (
         <div