Show loading skeletons instead of empty state when product or collection is missing

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DoqTD6MbXbwpCofyqwvELd

components/shopify/collection-detail.tsx

@@ -160,7 +160,10 @@ const CollectionDetail: React.FC<CollectionDetailProps> = ({
         </div>
 
         <div className="mt-8">
-          {loading ? (
+          {/* A missing or failed collection keeps the skeletons up rather than
+              showing an empty state, so the page stays presentable while a
+              handle is being chosen. */}
+          {loading || error ? (
             <div className={GRID_CLASSES}>
               {Array.from({ length: 10 }).map((_, index) => (
                 <div key={index} className="animate-pulse">
@@ -172,8 +175,6 @@ const CollectionDetail: React.FC<CollectionDetailProps> = ({
                 </div>
               ))}
             </div>
-          ) : error ? (
-            <p className="text-sm text-muted-foreground">{error}</p>
           ) : products.length === 0 ? (
             <p className="text-sm text-muted-foreground">
               {activeFilters.length > 0

components/shopify/product-detail/index.tsx

@@ -6,14 +6,6 @@ import { useProduct, type Product } from '@/hooks/use-shopify-products';
 import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
 import ProductDetailInfo from './product-detail-info';
-import { Button } from '@/components/ui/button';
-import {
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-} from '@/components/ui/empty';
 
 interface ProductVariant {
   id: string;
@@ -142,7 +134,9 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     }
   };
 
-  if (loading) {
+  // A missing or failed product keeps the skeletons up rather than showing an
+  // empty state, so the page stays presentable while a handle is being chosen.
+  if (loading || error || !product) {
     return (
       <div className="max-w-screen-2xl mx-auto px-8 py-8">
         <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 lg:gap-10">
@@ -168,26 +162,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     );
   }
 
-  if (error || !product) {
-    return (
-      <div className="container mx-auto px-4 py-8">
-        <Empty className="min-h-[400px]">
-          <EmptyHeader>
-            <EmptyTitle>Product Not Found</EmptyTitle>
-            <EmptyDescription>
-              {error || 'The requested product could not be found.'}
-            </EmptyDescription>
-          </EmptyHeader>
-          <EmptyContent>
-            <Button onClick={() => window.history.back()} variant="outline">
-              Go Back
-            </Button>
-          </EmptyContent>
-        </Empty>
-      </div>
-    );
-  }
-
   return (
     <div className="bg-background">
       <div className="max-w-screen-2xl mx-auto px-8 py-8">