Enhance loading skeletons and breadcrumbs

- Add content-m matching loading skeletons for ParkDetail, RideDetail, CompanyDetail, etc., replacing generic spinners to preserve layout during load
- Remove redundant Back to Parent Entity buttons in detail pages in favor of breadcrumb navigation
- Prepare groundwork for breadcrumbs across detail pages to improve cohesion and navigation
This commit is contained in:
gpt-engineer-app[bot]
2025-11-12 03:51:15 +00:00
parent fdfa1739e5
commit 3867d30aac
10 changed files with 361 additions and 101 deletions

View File

@@ -1,6 +1,8 @@
import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { EntityBreadcrumb } from '@/components/navigation/EntityBreadcrumb';
import { CompanyDetailSkeleton } from '@/components/loading/CompanyDetailSkeleton';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
@@ -167,17 +169,7 @@ export default function RideModelDetail() {
return (
<div className="min-h-screen bg-background">
<Header />
<div className="container mx-auto px-4 py-8">
<div className="animate-pulse space-y-6">
<div className="h-12 bg-muted rounded w-1/3"></div>
<div className="h-64 bg-muted rounded"></div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{[...Array(6)].map((_, i) => (
<div key={i} className="h-48 bg-muted rounded-lg"></div>
))}
</div>
</div>
</div>
<CompanyDetailSkeleton />
</div>
);
}
@@ -204,12 +196,25 @@ export default function RideModelDetail() {
<Header />
<main className="container mx-auto px-4 py-8">
<div className="flex items-center justify-between mb-6">
<Button variant="ghost" onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models`)}>
<ArrowLeft className="w-4 h-4 mr-2" />
Back to {manufacturer.name} Models
</Button>
{/* Breadcrumb Navigation */}
<EntityBreadcrumb
segments={[
{ label: 'Manufacturers', href: '/manufacturers' },
{
label: manufacturer.name,
href: `/manufacturers/${manufacturerSlug}`,
showPreview: true,
previewType: 'company',
previewSlug: manufacturerSlug || ''
},
{ label: 'Models', href: `/manufacturers/${manufacturerSlug}/models` },
{ label: model.name }
]}
className="mb-4"
/>
{/* Edit Button */}
<div className="flex justify-end mb-6">
<Button
variant="outline"
onClick={() => requireAuth(() => setIsEditModalOpen(true), "Sign in to edit this ride model")}