fix: rename skeletons

makeswift · Dec 20, 2024 · 4177a47 · 4177a47
1 parent 7f31fba
commit 4177a47
Showing 1 changed file with 39 additions and 27 deletions.
diff --git a/apps/web/vibes/soul/sections/product-detail/index.tsx b/apps/web/vibes/soul/sections/product-detail/index.tsx
@@ -127,7 +127,7 @@ export function ProductDetail<F extends Field>({
                     )}
                   </Stream>
 
-                  <Stream fallback={<ProductSummarySkeleton />} value={product.description}>
+                  <Stream fallback={<ProductDescriptionSkeleton />} value={product.description}>
                     {(description) => {
                       if (description === null || description === undefined) {
                         return null;
@@ -229,6 +229,16 @@ function ProductSummarySkeleton() {
   );
 }
 
+function ProductDescriptionSkeleton() {
+  return (
+    <div className="flex w-full animate-pulse flex-col gap-3.5 pb-6">
+      <div className="h-2.5 w-full bg-contrast-100" />
+      <div className="h-2.5 w-full bg-contrast-100" />
+      <div className="h-2.5 w-3/4 bg-contrast-100" />
+    </div>
+  );
+}
+
 function ProductDetailFormSkeleton() {
   return (
     <div className="flex animate-pulse flex-col gap-8 py-8">
@@ -258,32 +268,6 @@ function ProductDetailFormSkeleton() {
   );
 }
 
-function ProductDetailSkeleton() {
-  return (
-    <div className="grid animate-pulse grid-cols-1 items-stretch gap-x-6 gap-y-8 @2xl:grid-cols-2 @5xl:gap-x-12">
-      <div className="hidden @2xl:block">
-        <ProductGallerySkeleton />
-      </div>
-
-      <div>
-        <div className="mb-6 h-4 w-20 rounded-lg bg-contrast-100" />
-
-        <div className="mb-6 h-6 w-72 rounded-lg bg-contrast-100" />
-
-        <RatingSkeleton />
-
-        <PriceLabelSkeleton />
-
-        <div className="mb-8 @2xl:hidden">
-          <ProductGallerySkeleton />
-        </div>
-
-        <ProductDetailFormSkeleton />
-      </div>
-    </div>
-  );
-}
-
 function ProductAccordionsSkeleton() {
   return (
     <div className="flex h-[600px] w-full animate-pulse flex-col gap-8 pt-4">
@@ -311,3 +295,31 @@ function ProductAccordionsSkeleton() {
     </div>
   );
 }
+
+function ProductDetailSkeleton() {
+  return (
+    <div className="grid animate-pulse grid-cols-1 items-stretch gap-x-6 gap-y-8 @2xl:grid-cols-2 @5xl:gap-x-12">
+      <div className="hidden @2xl:block">
+        <ProductGallerySkeleton />
+      </div>
+
+      <div>
+        <div className="mb-6 h-4 w-20 rounded-lg bg-contrast-100" />
+
+        <div className="mb-6 h-6 w-72 rounded-lg bg-contrast-100" />
+
+        <RatingSkeleton />
+
+        <PriceLabelSkeleton />
+
+        <ProductSummarySkeleton />
+
+        <div className="mb-8 @2xl:hidden">
+          <ProductGallerySkeleton />
+        </div>
+
+        <ProductDetailFormSkeleton />
+      </div>
+    </div>
+  );
+}