mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-10 16:22:38 +02:00
feat(perf): add loading.tsx skeletons for async marketing routes
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
This commit is contained in:
guangyang1206
parent
61f4d05cd1
commit
dcafa364ff
6 changed files with 359 additions and 0 deletions
66
surfsense_web/app/(home)/blog/[slug]/loading.tsx
Normal file
66
surfsense_web/app/(home)/blog/[slug]/loading.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function BlogPostLoading() {
|
||||
return (
|
||||
<div className="min-h-screen relative pt-20">
|
||||
<div className="max-w-3xl mx-auto px-6 lg:px-10 pt-10 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-10" />
|
||||
<Skeleton className="h-4 w-3" />
|
||||
<Skeleton className="h-4 w-40" />
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<Skeleton className="h-6 w-16 rounded-full" />
|
||||
<Skeleton className="h-6 w-20 rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div className="space-y-3 mb-6">
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-4/5" />
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<Skeleton className="h-5 w-full mb-2" />
|
||||
<Skeleton className="h-5 w-3/4 mb-8" />
|
||||
|
||||
{/* Author + date */}
|
||||
<div className="flex items-center gap-3 mb-10">
|
||||
<Skeleton className="h-10 w-10 rounded-full" />
|
||||
<div className="space-y-1.5">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-3 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cover image */}
|
||||
<Skeleton className="w-full aspect-video rounded-xl mb-10" />
|
||||
|
||||
{/* Article body paragraphs */}
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="space-y-2 mb-6">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-4/5" />
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Sub-heading */}
|
||||
<Skeleton className="h-7 w-56 mt-8 mb-4" />
|
||||
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="space-y-2 mb-6">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-11/12" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
50
surfsense_web/app/(home)/blog/loading.tsx
Normal file
50
surfsense_web/app/(home)/blog/loading.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function BlogIndexLoading() {
|
||||
return (
|
||||
<div className="relative overflow-hidden bg-neutral-50 px-4 pt-20 md:px-8 dark:bg-neutral-950">
|
||||
<div className="mx-auto max-w-6xl pt-12 pb-24 md:pt-20">
|
||||
{/* Header */}
|
||||
<div className="mb-10 md:mb-14">
|
||||
<Skeleton className="h-10 w-24 rounded-md" />
|
||||
</div>
|
||||
|
||||
{/* Featured post skeleton */}
|
||||
<div className="mb-14 overflow-hidden rounded-3xl border border-neutral-200/80 dark:border-neutral-800">
|
||||
<Skeleton className="aspect-[2.4/1] min-h-[220px] w-full rounded-none" />
|
||||
<div className="p-6 md:p-8 space-y-3">
|
||||
<Skeleton className="h-5 w-24 rounded-full" />
|
||||
<Skeleton className="h-8 w-3/4" />
|
||||
<Skeleton className="h-4 w-full max-w-lg" />
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<Skeleton className="h-8 w-8 rounded-full" />
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search bar skeleton */}
|
||||
<div className="mb-10">
|
||||
<Skeleton className="h-11 w-full max-w-md rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Grid of article cards */}
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="space-y-3">
|
||||
<Skeleton className="aspect-video w-full rounded-2xl" />
|
||||
<Skeleton className="h-5 w-3/4" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-5/6" />
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<Skeleton className="h-6 w-6 rounded-full" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
63
surfsense_web/app/(home)/changelog/loading.tsx
Normal file
63
surfsense_web/app/(home)/changelog/loading.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function ChangelogLoading() {
|
||||
return (
|
||||
<div className="min-h-screen relative pt-20">
|
||||
{/* Header */}
|
||||
<div className="border-b border-border/50">
|
||||
<div className="max-w-5xl mx-auto relative">
|
||||
<div className="p-6 flex items-center justify-between">
|
||||
<div>
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Skeleton className="h-4 w-10" />
|
||||
<Skeleton className="h-4 w-3" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-48 mb-2" />
|
||||
<Skeleton className="h-4 w-80" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="max-w-5xl mx-auto px-6 lg:px-10 pt-10 pb-20">
|
||||
<div className="relative">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="relative flex flex-col md:flex-row gap-y-6 mb-10">
|
||||
{/* Left: date + version */}
|
||||
<div className="md:w-48 flex-shrink-0">
|
||||
<Skeleton className="h-4 w-24 mb-3" />
|
||||
<Skeleton className="h-12 w-12 rounded-xl" />
|
||||
</div>
|
||||
|
||||
{/* Right: content */}
|
||||
<div className="flex-1 md:pl-8 relative pb-10">
|
||||
<div className="space-y-4">
|
||||
{/* Title */}
|
||||
<Skeleton className="h-7 w-2/3" />
|
||||
{/* Tags */}
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-6 w-16 rounded-full" />
|
||||
<Skeleton className="h-6 w-20 rounded-full" />
|
||||
</div>
|
||||
{/* Body paragraphs */}
|
||||
<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>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-5/6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
surfsense_web/app/(home)/free/[model_slug]/loading.tsx
Normal file
65
surfsense_web/app/(home)/free/[model_slug]/loading.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function FreeModelLoading() {
|
||||
return (
|
||||
<>
|
||||
{/* Chat area skeleton - fills viewport */}
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Chat header */}
|
||||
<div className="flex items-center gap-3 border-b px-4 py-3">
|
||||
<Skeleton className="h-8 w-8 rounded-full" />
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</div>
|
||||
|
||||
{/* Chat messages area */}
|
||||
<div className="flex-1 flex flex-col justify-end gap-4 px-4 py-6">
|
||||
<div className="flex justify-end">
|
||||
<Skeleton className="h-10 w-56 rounded-2xl" />
|
||||
</div>
|
||||
<div className="space-y-2 max-w-lg">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-4/5" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input bar */}
|
||||
<div className="border-t px-4 py-3">
|
||||
<Skeleton className="h-12 w-full rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SEO section skeleton */}
|
||||
<div className="border-t bg-background">
|
||||
<div className="container mx-auto px-4 py-10 max-w-3xl">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Skeleton className="h-4 w-10" />
|
||||
<Skeleton className="h-4 w-3" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-3" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
|
||||
<Skeleton className="h-7 w-3/4 mb-2" />
|
||||
<Skeleton className="h-4 w-full mb-1" />
|
||||
<Skeleton className="h-4 w-2/3 mb-8" />
|
||||
|
||||
<div className="my-8 h-px bg-border" />
|
||||
|
||||
{/* FAQ skeleton */}
|
||||
<Skeleton className="h-6 w-64 mb-4" />
|
||||
<div className="flex flex-col gap-3">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="rounded-lg border bg-card p-4 space-y-2">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-3 w-full" />
|
||||
<Skeleton className="h-3 w-5/6" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
60
surfsense_web/app/(home)/free/loading.tsx
Normal file
60
surfsense_web/app/(home)/free/loading.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
55
surfsense_web/app/docs/[[...slug]]/loading.tsx
Normal file
55
surfsense_web/app/docs/[[...slug]]/loading.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue