@dmsi/wedgekit-react 0.0.441 → 0.0.442

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.441",
+  "version": "0.0.442",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/ProductImagePreview/ProductPrimaryImage.tsx

@@ -1,8 +1,8 @@
 import { useRef, useState, useCallback, useMemo, useEffect } from "react";
 import type { CSSProperties } from "react";
-import { Spinner } from "../Spinner";
 import type { ProductPreviewImage } from "./index";
-import { ImagePlaceholder } from "../ImagePlaceholder";
+
+const placeholderImageUri = "/placeholder.svg";
 
 export type ProductPrimaryImageProps = {
   image?: ProductPreviewImage;
@@ -44,8 +44,6 @@ export function ProductPrimaryImage({
   const rafRef = useRef<number | null>(null);
   const [active, setActive] = useState(false);
   const [, forceRerender] = useState(0);
-  const [imageLoading, setImageLoading] = useState(true);
-  const [imageError, setImageError] = useState(false);
 
   // Memoize image src to prevent unnecessary re-requests
   const imageSrc = useMemo(() => image?.src, [image?.src]);
@@ -83,7 +81,8 @@ export function ProductPrimaryImage({
     React.PointerEventHandler<HTMLDivElement>
   >(
     (e) => {
-      if (!zoomEnabled || !active || imageError) return;
+      if (isPlaceholder) return;
+      if (!zoomEnabled || !active) return;
 
       // Ignore touch events to prevent zoom on mobile
       if (e.pointerType === "touch") return;
@@ -123,7 +122,7 @@ export function ProductPrimaryImage({
         true,
       );
     },
-    [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange],
+    [isPlaceholder, zoomEnabled, active, zoomLensSize, onZoomPositionChange],
   );
 
   // Set up non-passive wheel event listener to properly prevent default
@@ -149,12 +148,16 @@ export function ProductPrimaryImage({
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
 
-  useEffect(() => {
-    setImageLoading(true);
-    setImageError(false);
-  }, [image]);
-
-  if (!image && !isPlaceholder) return null;
+  const handleImgError = useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement>) => {
+      if (!placeholderImageUri) return;
+      const img = e.currentTarget;
+      // Prevent infinite loop if placeholder also 404s
+      if (img.src === placeholderImageUri) return;
+      img.src = placeholderImageUri;
+    },
+    [],
+  );
 
   const pt = lastPointRef.current;
   let lensStyle: CSSProperties | undefined;
@@ -190,28 +193,15 @@ export function ProductPrimaryImage({
       onPointerLeave={handlePointerLeave}
       onPointerMove={handlePointerMove}
     >
-      {imageLoading && !imageError && !isPlaceholder && (
-        <div className="absolute inset-0 flex items-center justify-center bg-neutral-50">
-          <Spinner size="small" />
-        </div>
-      )}
-      {isPlaceholder ? (
-        <ImagePlaceholder width={width} height={height} />
-      ) : (
-        <img
-          key={imageSrc}
-          src={imageError ? "/placeholder.svg" : imageSrc}
-          alt={image?.alt || "Product image"}
-          className="object-cover min-w-full min-h-full select-none"
-          draggable={false}
-          loading="lazy"
-          onLoad={() => setImageLoading(false)}
-          onError={() => {
-            setImageLoading(false);
-            setImageError(true);
-          }}
-        />
-      )}
+      <img
+        key={imageSrc}
+        src={imageSrc ?? placeholderImageUri}
+        alt={image?.alt || "Product image"}
+        className="object-cover min-w-full min-h-full select-none"
+        draggable={false}
+        loading="lazy"
+        onError={handleImgError}
+      />
       {zoomEnabled && active && lensStyle && (
         <div
           aria-hidden

package/src/components/SkeletonParagraph.tsx

@@ -1,5 +1,23 @@
-export function SkeletonParagraph() {
+interface SkeletonParagraphProps {
+  /** Optional custom class names to further style/size the skeleton */
+  className?: string;
+  /** Height of the skeleton (tailwind height utility), defaults to h-6 */
+  heightClassName?: string;
+}
+
+/**
+ * A shimmering paragraph skeleton placeholder.
+ * Provides an animated left-to-right shimmer to indicate loading text content.
+ */
+export function SkeletonParagraph({
+  className = "",
+  heightClassName = "h-6",
+}: SkeletonParagraphProps) {
   return (
-    <div className="h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 "></div>
+    <div
+      aria-label="Loading content"
+      role="status"
+      className={`skeleton-paragraph ${heightClassName} w-full min-w-32 rounded-xs ${className}`}
+    />
   );
 }

package/src/index.css

@@ -634,6 +634,33 @@
   ); /* Created for Main Navigation */
 }
 
+/* Skeleton / Shimmer */
+.skeleton-paragraph {
+  position: relative;
+  overflow: hidden;
+  background-color: theme("colors.neutral.100");
+}
+
+.skeleton-paragraph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 @import "./darkmode.css";
 @import "./brand.css";
 

package/dist/chunk-ESCNCQGI.js

@@ -1,9 +0,0 @@
-// src/components/SkeletonParagraph.tsx
-import { jsx } from "react/jsx-runtime";
-function SkeletonParagraph() {
-  return /* @__PURE__ */ jsx("div", { className: "h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 " });
-}
-
-export {
-  SkeletonParagraph
-};