diff --git a/src/components/loading/CompanyDetailSkeleton.tsx b/src/components/loading/CompanyDetailSkeleton.tsx new file mode 100644 index 00000000..cc4d7c75 --- /dev/null +++ b/src/components/loading/CompanyDetailSkeleton.tsx @@ -0,0 +1,98 @@ +import { Card, CardContent, CardHeader } from '@/components/ui/card'; + +export function CompanyDetailSkeleton() { + return ( +
+ {/* Breadcrumb */} +
+ + {/* Edit Button Area */} +
+
+
+ + {/* Hero Banner */} +
+ + {/* Stats Cards */} +
+ {[1, 2, 3, 4].map((i) => ( + + +
+
+ + + ))} +
+ + {/* Tabs */} +
+ {['Overview', 'Rides', 'Models', 'Photos'].map((tab) => ( +
+ ))} +
+ + {/* Content Grid */} +
+ {/* Main Content */} +
+ {/* Description Card */} + + +
+ + +
+
+
+ + + + {/* Products Grid */} + + +
+ + +
+ {[1, 2, 3, 4, 5, 6].map((i) => ( +
+
+
+
+
+ ))} +
+ + +
+ + {/* Sidebar */} +
+ {/* Company Info Card */} + + +
+ + + {/* Logo */} +
+ + {/* Info Items */} + {[1, 2, 3].map((i) => ( +
+
+
+
+
+
+
+ ))} + + +
+
+
+ ); +} diff --git a/src/components/loading/ParkDetailSkeleton.tsx b/src/components/loading/ParkDetailSkeleton.tsx new file mode 100644 index 00000000..f3cb66e0 --- /dev/null +++ b/src/components/loading/ParkDetailSkeleton.tsx @@ -0,0 +1,101 @@ +import { Card, CardContent, CardHeader } from '@/components/ui/card'; + +export function ParkDetailSkeleton() { + return ( +
+ {/* Breadcrumb */} +
+ + {/* Edit Button Area */} +
+
+
+ + {/* Hero Banner */} +
+ + {/* Stats Cards */} +
+ {[1, 2, 3, 4].map((i) => ( + + +
+
+ + + ))} +
+ + {/* Tabs */} +
+ {['Overview', 'Rides', 'Reviews', 'Photos', 'History'].map((tab) => ( +
+ ))} +
+ + {/* Content Grid */} +
+ {/* Main Content */} +
+ {/* Description Card */} + + +
+ + +
+
+
+ + + + {/* Featured Rides Card */} + + +
+ + +
+ {[1, 2, 3, 4].map((i) => ( +
+
+
+
+
+ ))} +
+ + +
+ + {/* Sidebar */} +
+ {/* Info Card */} + + +
+ + + {[1, 2, 3, 4].map((i) => ( +
+
+
+
+
+
+
+ ))} + + + + {/* Map Card */} + + +
+ + +
+
+
+ ); +} diff --git a/src/components/loading/RideDetailSkeleton.tsx b/src/components/loading/RideDetailSkeleton.tsx new file mode 100644 index 00000000..680cba61 --- /dev/null +++ b/src/components/loading/RideDetailSkeleton.tsx @@ -0,0 +1,106 @@ +import { Card, CardContent } from '@/components/ui/card'; + +export function RideDetailSkeleton() { + return ( +
+ {/* Breadcrumb */} +
+ + {/* Edit Button Area */} +
+
+
+ + {/* Hero Banner */} +
+ + {/* Stats Grid */} +
+ {[1, 2, 3, 4, 5, 6].map((i) => ( + + +
+
+
+ + + ))} +
+ + {/* Tabs */} +
+ {['Overview', 'Reviews', 'Photos', 'History'].map((tab) => ( +
+ ))} +
+ + {/* Content Grid */} +
+ {/* Main Content */} +
+ {/* Description Card */} + + +
+
+
+
+ + + + {/* Technical Specs */} + + +
+
+ {[1, 2, 3, 4, 5, 6].map((i) => ( +
+
+
+
+ ))} +
+ + +
+ + {/* Sidebar */} +
+ {/* Ride Info Card */} + + +
+ {[1, 2, 3, 4, 5].map((i) => ( +
+
+
+
+
+
+
+ ))} + + + + {/* Similar Rides */} + + +
+
+ {[1, 2, 3].map((i) => ( +
+
+
+
+
+
+
+ ))} +
+ + +
+
+
+ ); +} diff --git a/src/pages/DesignerDetail.tsx b/src/pages/DesignerDetail.tsx index 5b193d45..a81c9bbe 100644 --- a/src/pages/DesignerDetail.tsx +++ b/src/pages/DesignerDetail.tsx @@ -1,6 +1,7 @@ import { useState, useEffect, lazy, Suspense } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { EntityBreadcrumb } from '@/components/navigation/EntityBreadcrumb'; +import { CompanyDetailSkeleton } from '@/components/loading/CompanyDetailSkeleton'; import { Header } from '@/components/layout/Header'; import { getBannerUrls } from '@/lib/cloudflareImageUtils'; import { Button } from '@/components/ui/button'; @@ -150,12 +151,7 @@ export default function DesignerDetail() { return (
-
-
-
-
-
-
+
); } @@ -191,13 +187,8 @@ export default function DesignerDetail() { className="mb-4" /> - {/* Back Button and Edit Button */} -
- - + {/* Edit Button */} +
- + {/* Edit Button */} +
- + {/* Edit Button */} +
- + {/* Edit Button */} +
- + {/* Breadcrumb Navigation */} + + + {/* Edit Button */} +
- + {/* Edit Button */} +
- + {/* Breadcrumb Navigation */} + + + {/* Edit Button */} +