add skeleton resolvers

editor/components/commerce/collection.tsx

@@ -2,6 +2,7 @@ import type { ShopifyCollection } from "@reacteditor/field-shopify";
 import { useCollectionProducts } from "@/editor/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
 import { Typography } from "@/editor/theme/Typography";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export type CollectionProps = {
   collection: ShopifyCollection | null;
@@ -17,10 +18,19 @@ export function CollectionView({
 
   if (!selected) {
     return (
-      <section className="py-20">
+      <section className="bg-background pb-24 pt-12 md:pt-20">
         <div className="container mx-auto max-w-7xl px-6">
-          <div className="mx-auto max-w-md rounded-md border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
-            Pick a collection to render this page.
+          <header className="mx-auto mb-14 flex max-w-2xl flex-col items-center gap-3 text-center">
+            <Skeleton className="h-3 w-24" />
+            <Skeleton className="h-10 w-3/4" />
+            {showDescription === "yes" ? (
+              <Skeleton className="mt-1 h-5 w-2/3" />
+            ) : null}
+          </header>
+          <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <Skeleton key={i} className="aspect-[4/5] w-full" />
+            ))}
           </div>
         </div>
       </section>
@@ -50,10 +60,7 @@ export function CollectionView({
         <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
           {loading
             ? Array.from({ length: 8 }).map((_, i) => (
-                <div
-                  key={i}
-                  className="aspect-[4/5] w-full animate-pulse rounded-md bg-muted"
-                />
+                <Skeleton key={i} className="aspect-[4/5] w-full" />
               ))
             : products.map((p: any) => <ProductCard key={p.id} product={p} />)}
         </div>