Commit
add loading skeletons for routes
commit
4714791
5 changed files with +67 and −0
Jump to a changed file
added src/app/debate/[id]/loading.tsx +9 −0
| @@ -0,0 +1,9 @@ | ||
| 1 | +import { DebateSkeleton } from '@/components/debate/debate-skeleton'; | |
| 2 | + | |
| 3 | +export default function Loading() { | |
| 4 | + return ( | |
| 5 | + <div className="container py-8"> | |
| 6 | + <DebateSkeleton /> | |
| 7 | + </div> | |
| 8 | + ); | |
| 9 | +} |
added src/app/demo/[id]/loading.tsx +9 −0
| @@ -0,0 +1,9 @@ | ||
| 1 | +import { DebateSkeleton } from '@/components/debate/debate-skeleton'; | |
| 2 | + | |
| 3 | +export default function Loading() { | |
| 4 | + return ( | |
| 5 | + <div className="container py-8"> | |
| 6 | + <DebateSkeleton /> | |
| 7 | + </div> | |
| 8 | + ); | |
| 9 | +} |
added src/app/demo/loading.tsx +17 −0
| @@ -0,0 +1,17 @@ | ||
| 1 | +import { Skeleton } from '@/components/ui/skeleton'; | |
| 2 | + | |
| 3 | +export default function Loading() { | |
| 4 | + return ( | |
| 5 | + <div className="container max-w-4xl space-y-8 py-10"> | |
| 6 | + <div className="flex flex-col items-center gap-3"> | |
| 7 | + <Skeleton className="h-8 w-64" /> | |
| 8 | + <Skeleton className="h-4 w-96 max-w-full" /> | |
| 9 | + </div> | |
| 10 | + <div className="grid gap-4 sm:grid-cols-2"> | |
| 11 | + {Array.from({ length: 2 }).map((_, i) => ( | |
| 12 | + <Skeleton key={i} className="h-40 w-full" /> | |
| 13 | + ))} | |
| 14 | + </div> | |
| 15 | + </div> | |
| 16 | + ); | |
| 17 | +} |
added src/app/history/loading.tsx +13 −0
| @@ -0,0 +1,13 @@ | ||
| 1 | +import { Skeleton } from '@/components/ui/skeleton'; | |
| 2 | + | |
| 3 | +export default function Loading() { | |
| 4 | + return ( | |
| 5 | + <div className="container max-w-4xl space-y-4 py-8"> | |
| 6 | + <Skeleton className="h-8 w-40" /> | |
| 7 | + <Skeleton className="h-10 w-full" /> | |
| 8 | + {Array.from({ length: 5 }).map((_, i) => ( | |
| 9 | + <Skeleton key={i} className="h-16 w-full" /> | |
| 10 | + ))} | |
| 11 | + </div> | |
| 12 | + ); | |
| 13 | +} |
added src/components/debate/debate-skeleton.tsx +19 −0
| @@ -0,0 +1,19 @@ | ||
| 1 | +import { Skeleton } from '@/components/ui/skeleton'; | |
| 2 | + | |
| 3 | +/** Placeholder for a debate console while its data loads. */ | |
| 4 | +export function DebateSkeleton() { | |
| 5 | + return ( | |
| 6 | + <div className="space-y-6"> | |
| 7 | + <div className="space-y-3"> | |
| 8 | + <Skeleton className="h-5 w-28" /> | |
| 9 | + <Skeleton className="h-8 w-3/4" /> | |
| 10 | + <Skeleton className="h-12 w-full" /> | |
| 11 | + </div> | |
| 12 | + <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3"> | |
| 13 | + {Array.from({ length: 3 }).map((_, i) => ( | |
| 14 | + <Skeleton key={i} className="h-48 w-full" /> | |
| 15 | + ))} | |
| 16 | + </div> | |
| 17 | + </div> | |
| 18 | + ); | |
| 19 | +} |