Merge pull request #146 from deco-sites/feat/loading-fallback

feat: loading skeletons

components/product/ProductShelf.tsx

@@ -11,6 +11,7 @@ import { useOffer } from "$store/sdk/useOffer.ts";
 import { usePlatform } from "$store/sdk/usePlatform.tsx";
 import type { Product } from "apps/commerce/types.ts";
 import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
+import { clx } from "$store/sdk/clx.ts";
 
 export interface Props {
   products: Product[] | null;
@@ -67,17 +68,21 @@ function ProductShelf({
 
       <div
         id={id}
-        class={`grid ${
-          layout?.showArrows ? "grid-cols-[48px_1fr_48px]" : ""
-        } px-0 md:px-5 container`}
+        class={clx(
+          "grid",
+          layout?.showArrows && "grid-cols-[48px_1fr_48px]",
+          "px-0 md:px-5 container",
+        )}
       >
         <Slider class="carousel carousel-center sm:carousel-end sm:gap-1 row-start-2 row-end-5">
           {products?.map((product, index) => (
             <Slider.Item
               index={index}
-              class={`carousel-item ${
-                slideDesktop[layout?.numberOfSliders?.desktop ?? 3]
-              } ${slideMobile[layout?.numberOfSliders?.mobile ?? 1]}`}
+              class={clx(
+                "carousel-item",
+                slideDesktop[layout?.numberOfSliders?.desktop ?? 3],
+                slideMobile[layout?.numberOfSliders?.mobile ?? 1],
+              )}
             >
               <ProductCard
                 product={product}

sections/Product/ImageGallerySlider.tsx

@@ -1 +1,12 @@
 export { default } from "../../components/product/Gallery/ImageSlider.tsx";
+
+export function LoadingFallback() {
+  return (
+    <div
+      style={{ height: "710px" }}
+      class="w-full flex justify-center items-center"
+    >
+      <span class="loading loading-spinner" />
+    </div>
+  );
+}

sections/Product/ProductInfo.tsx

@@ -1 +1,12 @@
 export { default } from "../../components/product/ProductInfo.tsx";
+
+export function LoadingFallback() {
+  return (
+    <div
+      style={{ height: "710px" }}
+      class="w-full flex justify-center items-center"
+    >
+      <span class="loading loading-spinner" />
+    </div>
+  );
+}

sections/Product/ProductShelf.tsx

@@ -1 +1,9 @@
 export { default } from "$store/components/product/ProductShelf.tsx";
+
+export function LoadingFallback() {
+  return (
+    <div style={{ height: "716px" }} class="flex justify-center items-center">
+      <span class="loading loading-spinner" />
+    </div>
+  );
+}

sections/Product/ProductShelfTabbed.tsx

@@ -1 +1,9 @@
 export { default } from "$store/components/product/ProductShelfTabbed.tsx";
+
+export function LoadingFallback() {
+  return (
+    <div style={{ height: "716px" }} class="flex justify-center items-center">
+      <span class="loading loading-spinner" />
+    </div>
+  );
+}

sections/Product/SearchResult.tsx

@@ -1 +1,9 @@
 export { default } from "$store/components/search/SearchResult.tsx";
+
+export function LoadingFallback() {
+  return (
+    <div style={{ height: "100vh" }} class="flex justify-center items-center">
+      <span class="loading loading-spinner" />
+    </div>
+  );
+}