feat(frontend): loading.tsx skeletons for feed, tags, search, and thread pages
This commit is contained in:
20
thoughts-frontend/app/loading.tsx
Normal file
20
thoughts-frontend/app/loading.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
12
thoughts-frontend/app/search/loading.tsx
Normal file
12
thoughts-frontend/app/search/loading.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
12
thoughts-frontend/app/tags/[tagName]/loading.tsx
Normal file
12
thoughts-frontend/app/tags/[tagName]/loading.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
thoughts-frontend/app/thoughts/[thoughtId]/loading.tsx
Normal file
13
thoughts-frontend/app/thoughts/[thoughtId]/loading.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user