kschappell/codetutor
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

loading skeletons

Browse Source
This commit is contained in:
Kai Chappell
2025-05-30 20:34:31 +01:00
parent 35f4cf43cc
commit 64e5f8b3b6
5 changed files with 145 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/categories/loading.tsx Normal file
View File

@@ -0,0 +1,20 @@
export default function CategoriesLoading() {
return (
<div className="space-y-6">
<div className="h-9 w-44 bg-[var(--secondary)] rounded animate-pulse" />
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{[1, 2, 3, 4, 5, 6].map((i) => (
<div
key={i}
className="p-4 rounded-lg bg-[var(--card)] border border-[var(--border)]"
>
<div className="h-6 w-32 bg-[var(--secondary)] rounded animate-pulse mb-2" />
<div className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse mb-2" />
<div className="h-4 w-1/2 bg-[var(--secondary)] rounded animate-pulse" />
</div>
))}
</div>
</div>
);
}

30
frontend/src/app/patterns/[slug]/loading.tsx Normal file
View File

@@ -0,0 +1,30 @@
export default function PatternDetailLoading() {
return (
<div className="space-y-6">
<div className="h-10 w-64 bg-[var(--secondary)] rounded animate-pulse" />
<div className="h-6 w-24 bg-[var(--secondary)] rounded animate-pulse" />
<div className="space-y-2">
<div className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse" />
<div className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse" />
<div className="h-4 w-3/4 bg-[var(--secondary)] rounded animate-pulse" />
</div>
<div>
<div className="h-6 w-48 bg-[var(--secondary)] rounded animate-pulse mb-4" />
<div className="grid gap-4">
{[1, 2, 3].map((i) => (
<div
key={i}
className="p-4 rounded-lg bg-[var(--card)] border border-[var(--border)]"
>
<div className="h-5 w-48 bg-[var(--secondary)] rounded animate-pulse mb-2" />
<div className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse" />
</div>
))}
</div>
</div>
</div>
);
}

20
frontend/src/app/patterns/loading.tsx Normal file
View File

@@ -0,0 +1,20 @@
export default function PatternsLoading() {
return (
<div className="space-y-6">
<div className="h-9 w-40 bg-[var(--secondary)] rounded animate-pulse" />
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{[1, 2, 3, 4, 5, 6].map((i) => (
<div
key={i}
className="p-4 rounded-lg bg-[var(--card)] border border-[var(--border)]"
>
<div className="h-6 w-40 bg-[var(--secondary)] rounded animate-pulse mb-2" />
<div className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse mb-2" />
<div className="h-4 w-2/3 bg-[var(--secondary)] rounded animate-pulse" />
</div>
))}
</div>
</div>
);
}

39
frontend/src/app/questions/[slug]/loading.tsx Normal file
View File

@@ -0,0 +1,39 @@
export default function QuestionDetailLoading() {
return (
<div className="space-y-6">
<div className="h-10 w-3/4 bg-[var(--secondary)] rounded animate-pulse" />
<div className="flex gap-2">
{[1, 2, 3].map((i) => (
<div
key={i}
className="h-6 w-20 bg-[var(--secondary)] rounded animate-pulse"
/>
))}
</div>
<div className="space-y-2">
<div className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse" />
<div className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse" />
<div className="h-4 w-2/3 bg-[var(--secondary)] rounded animate-pulse" />
</div>
<div className="p-4 rounded-lg bg-[var(--card)] border border-[var(--border)]">
<div className="h-6 w-32 bg-[var(--secondary)] rounded animate-pulse mb-4" />
<div className="space-y-2">
{[1, 2, 3].map((i) => (
<div
key={i}
className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse"
/>
))}
</div>
</div>
<div className="p-4 rounded-lg bg-[var(--card)] border border-[var(--border)]">
<div className="h-6 w-24 bg-[var(--secondary)] rounded animate-pulse mb-4" />
<div className="h-48 w-full bg-[var(--secondary)] rounded animate-pulse" />
</div>
</div>
);
}

36
frontend/src/app/questions/loading.tsx Normal file
View File

@@ -0,0 +1,36 @@
export default function QuestionsLoading() {
return (
<div className="space-y-6">
<div className="h-9 w-48 bg-[var(--secondary)] rounded animate-pulse" />
<div className="flex flex-wrap gap-4 p-4 rounded-lg bg-[var(--secondary)]">
<div className="space-y-1">
<div className="h-4 w-16 bg-[var(--muted)] rounded animate-pulse" />
<div className="flex gap-2">
{[1, 2, 3, 4].map((i) => (
<div
key={i}
className="h-8 w-16 bg-[var(--muted)] rounded animate-pulse"
/>
))}
</div>
</div>
</div>
<div className="h-4 w-40 bg-[var(--secondary)] rounded animate-pulse" />
<div className="grid gap-4">
{[1, 2, 3, 4, 5].map((i) => (
<div
key={i}
className="p-4 rounded-lg bg-[var(--card)] border border-[var(--border)]"
>
<div className="h-6 w-64 bg-[var(--secondary)] rounded animate-pulse mb-2" />
<div className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse mb-2" />
<div className="h-4 w-3/4 bg-[var(--secondary)] rounded animate-pulse" />
</div>
))}
</div>
</div>
);
}