Skip to content

Commit df81eb9

Browse files
ladunjexaladunjexa
committed
Implemented Loading States for home, community, collection, tags, and profiles
1 parent 6c29b1b commit df81eb9

File tree

7 files changed

+205
-0
lines changed

7 files changed

+205
-0
lines changed

‎app/(root)/(home)/loading.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Link from "next/link";
2+
3+
import { Button } from "@/components/ui/button";
4+
import { Skeleton } from "@/components/ui/skeleton";
5+
6+
const Loading = () => {
7+
return (
8+
<section>
9+
<div className="flex w-full flex-col-reverse justify-between gap-4 sm:flex-row sm:items-center">
10+
<h1 className="h1-bold text-dark100_light900">All Questions</h1>
11+
12+
<Link href="/ask-question" className="flex justify-end max-sm:w-full">
13+
<Button className="primary-gradient min-h-[46px] px-4 py-3 !text-light-900">
14+
Ask a Question
15+
</Button>
16+
</Link>
17+
</div>
18+
19+
<div className="mb-12 mt-11 flex flex-wrap items-center justify-between gap-5">
20+
<Skeleton className="h-14 flex-1" />
21+
<div className="hidden max-md:block">
22+
<Skeleton className="h-14 w-28" />
23+
</div>
24+
</div>
25+
26+
<div className="my-10 hidden flex-wrap gap-3 md:flex">
27+
<Skeleton className="h-9 w-28" />
28+
<Skeleton className="h-9 w-28" />
29+
<Skeleton className="h-9 w-28" />
30+
<Skeleton className="h-9 w-28" />
31+
</div>
32+
33+
<div className="flex flex-col gap-6">
34+
{[...Array(10)].map((_, i) => (
35+
<Skeleton key={i} className="h-48 w-full rounded-xl" />
36+
))}
37+
</div>
38+
</section>
39+
);
40+
};
41+
42+
export default Loading;

‎app/(root)/collection/loading.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
const Loading = () => {
4+
return (
5+
<section>
6+
<h1 className="h1-bold text-dark100_light900">Saved Questions</h1>
7+
8+
<div className="mb-12 mt-11 flex flex-wrap gap-5">
9+
<Skeleton className="h-14 flex-1" />
10+
<Skeleton className="h-14 w-28" />
11+
</div>
12+
13+
<div className="flex flex-col gap-6">
14+
{[...Array(10)].map((_, i) => (
15+
<Skeleton key={i} className="h-48 w-full rounded-xl" />
16+
))}
17+
</div>
18+
</section>
19+
);
20+
};
21+
22+
export default Loading;

‎app/(root)/community/loading.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
const Loading = () => {
4+
return (
5+
<section>
6+
<h1 className="h1-bold text-dark100_light900">All Users</h1>
7+
8+
<div className="mb-12 mt-11 flex flex-wrap gap-5">
9+
<Skeleton className="h-14 flex-1" />
10+
<Skeleton className="h-14 w-28" />
11+
</div>
12+
13+
<div className="flex flex-wrap gap-4">
14+
{[...Array(10)].map((_, i) => (
15+
<Skeleton key={i} className="h-60 w-full rounded-2xl sm:w-[260px]" />
16+
))}
17+
</div>
18+
</section>
19+
);
20+
};
21+
22+
export default Loading;

‎app/(root)/profile/[id]/loading.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
const Loading = () => {
4+
return (
5+
<section>
6+
<div className="flex flex-col items-start gap-4 lg:flex-row">
7+
<Skeleton className="h-36 w-36 rounded-full" />
8+
9+
<div className="mt-3">
10+
<Skeleton className="h-7 w-28" />
11+
<Skeleton className="mt-3 h-7 w-20" />
12+
13+
<div className="mt-5 flex flex-wrap items-center justify-start gap-5">
14+
<Skeleton className="h-9 w-36" />
15+
<Skeleton className="h-9 w-36" />
16+
</div>
17+
18+
<Skeleton className="mt-8 h-7 w-9/12" />
19+
</div>
20+
</div>
21+
22+
<div className="mb-12 mt-10">
23+
<Skeleton className="h-7 w-full" />
24+
25+
<div className="mt-5 grid grid-cols-1 gap-5 xs:grid-cols-2 md:grid-cols-4">
26+
<Skeleton className="h-28 rounded-md" />
27+
<Skeleton className="h-28 rounded-md" />
28+
<Skeleton className="h-28 rounded-md" />
29+
<Skeleton className="h-28 rounded-md" />
30+
</div>
31+
</div>
32+
33+
<div className="mt-10 flex gap-10">
34+
<div className="flex flex-1 flex-col">
35+
<div className="flex">
36+
<Skeleton className="h-11 w-24 rounded-r-none" />
37+
<Skeleton className="h-11 w-24 rounded-l-none" />
38+
</div>
39+
40+
<div className="mt-5 flex w-full flex-col gap-6">
41+
{[...Array(5)].map((_, i) => (
42+
<Skeleton key={i} className="h-48 w-full rounded-xl" />
43+
))}
44+
</div>
45+
</div>
46+
47+
<div className="flex min-w-[278px] flex-col max-lg:hidden">
48+
<Skeleton className="h-7 w-10" />
49+
50+
<div className="mt-7 flex flex-col gap-4">
51+
<Skeleton className="h-7" />
52+
<Skeleton className="h-7" />
53+
<Skeleton className="h-7" />
54+
<Skeleton className="h-7" />
55+
<Skeleton className="h-7" />
56+
</div>
57+
</div>
58+
</div>
59+
</section>
60+
);
61+
};
62+
63+
export default Loading;

‎app/(root)/tags/[id]/loading.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
const Loading = () => {
4+
return (
5+
<section>
6+
<Skeleton className="h-12 w-52" />
7+
8+
<Skeleton className="mb-12 mt-11 h-14 w-full" />
9+
10+
<div className="mt-10 flex flex-col gap-6">
11+
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
12+
<Skeleton key={item} className="h-48 w-full rounded-xl" />
13+
))}
14+
</div>
15+
</section>
16+
);
17+
};
18+
19+
export default Loading;

‎app/(root)/tags/loading.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
const Loading = () => {
4+
return (
5+
<section>
6+
<h1 className="h1-bold text-dark100_light900">Tags</h1>
7+
8+
<div className="mb-12 mt-11 flex flex-wrap items-center justify-between gap-5">
9+
<Skeleton className="h-14 flex-1" />
10+
<Skeleton className="h-14 w-28" />
11+
</div>
12+
13+
<div className="flex flex-wrap gap-4">
14+
{[...Array(10)].map((_, i) => (
15+
<Skeleton key={i} className="h-60 w-full rounded-2xl sm:w-[260px]" />
16+
))}
17+
</div>
18+
</section>
19+
);
20+
};
21+
22+
export default Loading;

‎components/ui/skeleton.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { cn } from "@/lib/utils"
2+
3+
function Skeleton({
4+
className,
5+
...props
6+
}: React.HTMLAttributes<HTMLDivElement>) {
7+
return (
8+
<div
9+
className={cn("animate-pulse rounded-md bg-muted", className)}
10+
{...props}
11+
/>
12+
)
13+
}
14+
15+
export { Skeleton }

0 commit comments

Comments
 (0)