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
55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
export default function DocsLoading() {
|
|
return (
|
|
<div className="flex flex-1 flex-col gap-4 p-6 max-w-4xl mx-auto w-full">
|
|
{/* Title */}
|
|
<Skeleton className="h-9 w-64" />
|
|
|
|
{/* Description */}
|
|
<Skeleton className="h-5 w-full max-w-md" />
|
|
|
|
<div className="mt-4 space-y-8">
|
|
{/* Paragraph block 1 */}
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-3/4" />
|
|
</div>
|
|
|
|
{/* Sub-heading */}
|
|
<Skeleton className="h-7 w-48" />
|
|
|
|
{/* Paragraph block 2 */}
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-5/6" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-2/3" />
|
|
</div>
|
|
|
|
{/* Code block placeholder */}
|
|
<Skeleton className="h-28 w-full rounded-lg" />
|
|
|
|
{/* Sub-heading */}
|
|
<Skeleton className="h-7 w-56" />
|
|
|
|
{/* List items */}
|
|
<div className="space-y-3">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<div key={i} className="flex items-start gap-3">
|
|
<Skeleton className="mt-1 h-3 w-3 shrink-0 rounded-full" />
|
|
<Skeleton className="h-4 w-full max-w-lg" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Paragraph block 3 */}
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-4/5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|