feat(frontend): loading.tsx skeletons for feed, tags, search, and thread pages

This commit is contained in:
2026-05-16 02:16:45 +02:00
parent 42baf3fe3c
commit f135e4d583
4 changed files with 57 additions and 0 deletions

View File

@@ -0,0 +1,20 @@
import { ThoughtSkeleton } from "@/components/loading-skeleton";
export default function FeedLoading() {
return (
<div className="container mx-auto max-w-6xl p-4 sm:p-6">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
<aside className="hidden lg:block lg:col-span-1" />
<main className="col-span-1 lg:col-span-2 space-y-6">
<div className="h-10 w-32 bg-muted rounded animate-pulse mb-6" />
<div className="space-y-4">
<ThoughtSkeleton />
<ThoughtSkeleton />
<ThoughtSkeleton />
</div>
</main>
<aside className="hidden lg:block lg:col-span-1" />
</div>
</div>
);
}

View File

@@ -0,0 +1,12 @@
import { ThoughtSkeleton } from "@/components/loading-skeleton";
export default function SearchLoading() {
return (
<div className="container mx-auto max-w-2xl p-4 sm:p-6 space-y-4">
<div className="h-8 w-48 bg-muted rounded animate-pulse" />
<ThoughtSkeleton />
<ThoughtSkeleton />
<ThoughtSkeleton />
</div>
);
}

View File

@@ -0,0 +1,12 @@
import { ThoughtSkeleton } from "@/components/loading-skeleton";
export default function TagLoading() {
return (
<div className="container mx-auto max-w-2xl p-4 sm:p-6 space-y-4">
<div className="h-8 w-40 bg-muted rounded animate-pulse" />
<ThoughtSkeleton />
<ThoughtSkeleton />
<ThoughtSkeleton />
</div>
);
}

View File

@@ -0,0 +1,13 @@
import { ThoughtSkeleton } from "@/components/loading-skeleton";
export default function ThoughtLoading() {
return (
<div className="container mx-auto max-w-2xl p-4 sm:p-6 space-y-4">
<ThoughtSkeleton />
<div className="pl-6 border-l-2 border-primary border-dashed space-y-4">
<ThoughtSkeleton />
<ThoughtSkeleton />
</div>
</div>
);
}