mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-04 05:12:38 +02:00
dcafa364ff
Fixes #1243 Add sibling loading.tsx files for all 6 async route segments that were missing instant loading UI, causing blank screens during navigation on slow networks or cold caches. Routes covered: - /docs/[[...slug]] — awaits getDocPage + MDX body - /blog — awaits source.getPages() - /blog/[slug] — awaits params + MDX body - /changelog — awaits source.getPages() - /free — awaits getModels() fetch - /free/[model_slug] — awaits Promise.all([getModel, getAllModels]) Each loading.tsx is a Server Component returning an animate-pulse skeleton that matches its route's layout (header, content area, grid/table/timeline as appropriate). Uses the Skeleton component and Tailwind classes already present in the project. Follows the pattern established in: - app/dashboard/[search_space_id]/logs/loading.tsx - app/dashboard/[search_space_id]/new-chat/loading.tsx
60 lines
2 KiB
TypeScript
60 lines
2 KiB
TypeScript
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
export default function FreeChatLoading() {
|
|
return (
|
|
<div className="min-h-screen pt-20">
|
|
<article className="container mx-auto px-4 pb-20">
|
|
{/* Breadcrumb */}
|
|
<div className="flex items-center gap-2 mb-8">
|
|
<Skeleton className="h-4 w-10" />
|
|
<Skeleton className="h-4 w-3" />
|
|
<Skeleton className="h-4 w-24" />
|
|
</div>
|
|
|
|
{/* Hero section */}
|
|
<section className="mt-8 text-center max-w-3xl mx-auto space-y-4">
|
|
<Skeleton className="h-12 w-3/4 mx-auto" />
|
|
<Skeleton className="h-12 w-2/3 mx-auto" />
|
|
<Skeleton className="h-5 w-full max-w-lg mx-auto" />
|
|
<Skeleton className="h-5 w-4/5 max-w-lg mx-auto" />
|
|
<div className="flex flex-wrap items-center justify-center gap-3 mt-6">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-8 w-28 rounded-full" />
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<div className="my-12 max-w-4xl mx-auto h-px bg-border" />
|
|
|
|
{/* Model table */}
|
|
<section className="max-w-4xl mx-auto">
|
|
<Skeleton className="h-7 w-64 mb-2" />
|
|
<Skeleton className="h-4 w-80 mb-6" />
|
|
|
|
<div className="overflow-hidden rounded-lg border">
|
|
{/* Table header */}
|
|
<div className="flex gap-4 px-4 py-3 bg-muted/50 border-b">
|
|
<Skeleton className="h-4 w-[45%]" />
|
|
<Skeleton className="h-4 w-24" />
|
|
<Skeleton className="h-4 w-16" />
|
|
<Skeleton className="h-4 w-20" />
|
|
</div>
|
|
|
|
{/* Table rows */}
|
|
{Array.from({ length: 8 }).map((_, i) => (
|
|
<div key={i} className="flex items-center gap-4 px-4 py-3 border-b last:border-0">
|
|
<div className="flex-1 space-y-1.5">
|
|
<Skeleton className="h-4 w-40" />
|
|
<Skeleton className="h-3 w-24" />
|
|
</div>
|
|
<Skeleton className="h-4 w-24" />
|
|
<Skeleton className="h-6 w-14 rounded-full" />
|
|
<Skeleton className="h-8 w-20 rounded-md" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</div>
|
|
);
|
|
}
|