@snowcone-app/ui 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.1
+
+### Patch Changes
+
+- [#609](https://github.com/snowcone-app/snowcone-monorepo/pull/609) [`a858719`](https://github.com/snowcone-app/snowcone-monorepo/commit/a85871910d0e48111b12636c32560b568a057291) Thanks [@kevinsproles](https://github.com/kevinsproles)! - HeroProductImage now shows a pulsing loading skeleton until the first mockup image has actually painted, instead of a blank white area while the render is fetched.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -10088,6 +10088,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
   const [prevUrl, setPrevUrl] = (0, import_react44.useState)(null);
   const [showNew, setShowNew] = (0, import_react44.useState)(false);
   const [renderedUrl, setRenderedUrl] = (0, import_react44.useState)(displayUrl);
+  const [firstImageLoaded, setFirstImageLoaded] = (0, import_react44.useState)(false);
   const prevDisplayUrlRef = (0, import_react44.useRef)(displayUrl);
   const signHintShownRef = (0, import_react44.useRef)(false);
   (0, import_react44.useEffect)(() => {
@@ -10167,6 +10168,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
       style,
       "data-hero-image": "true",
       children: [
+        !firstImageLoaded && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "absolute inset-0 bg-muted-foreground/20 animate-pulse" }),
         renderedUrl && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "img",
           {
@@ -10179,6 +10181,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
             fetchPriority: "high",
             onClick,
             onLoad: () => {
+              setFirstImageLoaded(true);
               if (!onLoadCalledRef.current && onLoad) {
                 onLoadCalledRef.current = true;
                 onLoad();
@@ -10186,6 +10189,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
               onUrlGeneratedRef.current?.(renderedUrl);
             },
             onError: () => {
+              setFirstImageLoaded(true);
               onError?.();
               if (process.env.NODE_ENV !== "production" && !signHintShownRef.current && renderedUrl && /\/[A-Za-z0-9]+\?/.test(renderedUrl) && !/[?&]signature=/.test(renderedUrl)) {
                 signHintShownRef.current = true;
@@ -10211,8 +10215,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
             },
             onTransitionEnd: handleCrossfadeEnd
           }
-        ),
-        !renderedUrl && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "absolute inset-0 bg-zinc-200" })
+        )
       ]
     }
   );