Skip to content

Commit 145ced2

Browse files
JoshHyde9JoshHyde9
authored
fix: loading skeletons (#121)
1 parent 3b32bd3 commit 145ced2

4 files changed

Lines changed: 90 additions & 37 deletions

File tree

‎apps/web/src/app/list/loading.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { PostSkeleton } from "@/components/post-skeleton";
2+
3+
export default function Loading() {
4+
return (
5+
<main className="flex min-h-screen w-full animate-pulse flex-col items-center px-4 pt-10 md:px-8">
6+
<section className="max-w-4xl w-full mx-auto">
7+
<header className="flex w-full flex-col items-center justify-center gap-4">
8+
{/* Today's Top Launches */}
9+
<div className="h-10 w-3/4 rounded-full bg-[#88888820] md:w-1/2 lg:w-1/2" />
10+
<div className="h-10 w-3/5 rounded-full bg-[#88888820] md:hidden" />
11+
12+
{/* Stats Section */}
13+
<section className="w-full px-4 my-8">
14+
{/* AI - No AI text */}
15+
<div className="flex w-full justify-between mb-1 px-1">
16+
<div className="h-7 w-3/11 rounded-full bg-[#88888820] md:w-1/6 lg:w-1/6" />
17+
<div className="h-7 w-3/11 rounded-full bg-[#88888820] md:w-1/6 lg:w-1/6" />
18+
</div>
19+
20+
{/* SlopMeter */}
21+
<div className="h-8 mb-2 rounded-full bg-[#88888820]" />
22+
23+
{/* SlopMeter TM */}
24+
<div className="flex justify-center w-full">
25+
<div className="h-5 w-2/6 rounded-full bg-[#88888820] md:w-1/6 lg:w-1/11" />
26+
</div>
27+
</section>
28+
</header>
29+
30+
<div className="mx-auto w-full">
31+
<div className="flex flex-col gap-10 overflow-hidden md:gap-4">
32+
{Array.from({ length: 5 }).map(() => (
33+
<PostSkeleton key={`post-skeleton-${crypto.randomUUID()}`} />
34+
))}
35+
</div>
36+
</div>
37+
</section>
38+
</main>
39+
);
40+
}

‎apps/web/src/app/loading.tsx‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,46 @@ import { PostSkeleton } from "../components/post-skeleton";
22

33
export default function Loading() {
44
return (
5-
<main className="flex min-h-screen w-full animate-pulse flex-col items-center px-4 pt-10 md:px-8">
6-
<header className="flex w-full flex-col items-center gap-4 pb-10">
7-
<div className="mr-auto h-10 w-10/12 rounded-full bg-[#88888820] md:mb-4 lg:m-0 lg:mb-4 lg:w-8/12 2xl:w-2/6 " />
8-
<div className="mb-4 mr-auto h-10 w-7/12 rounded-full bg-[#88888820] md:hidden lg:m-0 " />
5+
<main className="flex min-h-screen w-full animate-pulse flex-col items-center">
6+
{/* Hero Section */}
7+
<header className="w-full flex flex-col justify-center items-center pt-4 pb-8 sm:py-20 px-4 relative overflow-clip">
8+
{/* Pill */}
9+
<div className="mb-5 w-32 h-6 rounded-full bg-[#88888820]" />
910

10-
<div className="mb-4 h-[50px] w-[300px] rounded-full bg-[#88888820] " />
11+
{/* Heading */}
12+
<div className="flex flex-col items-center w-full mb-6">
13+
<div className="mb-2 h-10 w-3/4 rounded-full bg-[#88888820] sm:w-1/3 md:w-8/11 lg:w-3xl" />
14+
<div className="mb-2 h-10 w-11/12 rounded-full bg-[#88888820] sm:w-2/3 md:w-1/3 lg:hidden" />
15+
<div className="h-10 w-4/5 rounded-full bg-[#88888820] sm:w-2/5 md:hidden" />
16+
</div>
17+
18+
{/* Subheading */}
19+
<div className="flex flex-col items-center w-full max-w-2xl mb-8">
20+
<div className="mb-2 h-5 w-11/12 rounded-full bg-[#88888820] sm:w-4/6 md:w-11/12" />
21+
<div className="mb-2 h-5 w-9/12 rounded-full bg-[#88888820] sm:w-5/6 md:w-3/5" />
22+
<div className="mb-2 h-5 w-10/12 rounded-full bg-[#88888820] sm:hidden" />
23+
<div className="h-5 w-3/5 rounded-full bg-[#88888820] sm:hidden" />
24+
</div>
1125

12-
<div className="w-full md:w-11/12 lg:w-8/12 2xl:w-2/6">
13-
<div className="mb-4 h-5 w-3/12 rounded-full bg-[#88888820]" />
14-
<div className="w-full">
15-
<div className="mb-4 h-[32px] rounded-full bg-[#88888820]" />
16-
</div>
17-
<div className="mb-4 h-3 w-2/5 rounded-full bg-[#88888820]" />
26+
{/* CTA Buttons */}
27+
<div className="w-full flex flex-col items-center justify-center gap-4 sm:flex-row">
28+
<div className="h-10 w-[190px] rounded-md bg-[#88888820]" />
29+
<div className="h-10 w-[154px] rounded-md bg-[#88888820]" />
1830
</div>
1931
</header>
2032

21-
<div className="w-full md:w-11/12 2xl:w-[1129.65px]">
22-
<div className="flex flex-col gap-10 overflow-hidden md:gap-4">
23-
{Array.from({ length: 5 }).map((_, index) => (
33+
<section className="mx-auto w-full flex flex-col items-center justify-center border-t border-neutral-500/40 px-4 pt-16 pb-12 bg-neutral-100 rounded-b-3xl dark:bg-neutral-950">
34+
<div className="h-[30px] mb-8 w-11/12 rounded-full bg-[#88888820] sm:w-2/3 md:w-[360px]" />
35+
<div className="w-full max-w-4xl flex flex-col gap-10 overflow-hidden md:gap-4">
36+
{Array.from({ length: 3 }).map(() => (
2437
<PostSkeleton key={`post-skeleton-${crypto.randomUUID()}`} />
2538
))}
2639
</div>
2740

28-
<div className="flex flex-col items-center pt-8">
29-
<div className="mb-4 h-4 w-11/12 rounded-full bg-[#88888820] md:w-5/12 " />
30-
<div className="mb-4 h-2 w-11/12 rounded-full bg-[#88888820] md:w-4/12 " />
41+
<div className="w-full flex flex-col items-center mt-8">
42+
<div className="h-10 w-[163px] rounded-md bg-[#88888820]" />
3143
</div>
32-
</div>
44+
</section>
3345
</main>
3446
);
3547
}

‎apps/web/src/app/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Button } from "@/components/ui/button";
2-
import Image from "next/image";
32
import { Card } from "../components/card";
43
import { JsonLd } from "../components/json-ld";
54
import { Link } from "../components/link";

‎apps/web/src/components/post-skeleton.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
export const PostSkeleton = () => {
22
return (
3-
<div className="group flex w-full cursor-pointer flex-row items-center rounded-2xl duration-300 md:gap-8 md:p-8">
4-
<div className="hidden lg:flex lg:items-center lg:gap-x-8">
5-
<div className="rounded-lg lg:size-12 bg-[#88888820]" />
6-
7-
<div className="relative object-contain lg:size-24">
3+
<div className="group flex w-full flex-row items-center rounded-2xl duration-300 md:gap-8 md:p-8">
4+
{/* Desktop iamge */}
5+
<div className="hidden md:flex md:self-start lg:self-center">
6+
<div className="relative size-10 object-contain lg:size-24">
87
<svg
98
className="text-[#88888820]"
109
aria-hidden="true"
@@ -17,9 +16,10 @@ export const PostSkeleton = () => {
1716
</div>
1817
</div>
1918

19+
{/* Phone image */}
2020
<div className="flex w-full flex-col items-start gap-2">
21-
<div className="flex w-full gap-x-2 lg:hidden">
22-
<div className="relative block size-10 object-contain lg:hidden lg:size-24">
21+
<div className="flex w-full gap-x-2 md:hidden">
22+
<div className="relative block size-10 object-contain md:hidden md:size-24">
2323
<svg
2424
className="text-[#88888820]"
2525
aria-hidden="true"
@@ -31,30 +31,32 @@ export const PostSkeleton = () => {
3131
</svg>
3232
</div>
3333
<div className="flex w-full gap-2">
34-
<div className="mb-3 h-8 w-1/2 rounded-full bg-[#88888820] md:w-2/5 " />
34+
<div className="mb-3 h-8 w-1/2 rounded-full bg-[#88888820] md:w-2/5" />
3535
</div>
3636
</div>
3737

38-
<div className="mb-2 hidden h-10 w-2/5 rounded-full bg-[#88888820] lg:block " />
38+
<div className="mb-2 hidden h-10 w-2/5 rounded-full bg-[#88888820] md:block" />
3939

40-
<div className="mb-2 h-3 w-11/12 rounded-full bg-[#88888820] md:h-5 md:w-3/5 " />
40+
<div className="mb-2 h-3 w-11/12 rounded-full bg-[#88888820] md:h-5 md:w-3/5" />
4141

42-
<div className="mb-2 flex w-full flex-wrap gap-x-2 md:mb-4">
43-
{Array.from({ length: 3 }).map((_, i) => (
42+
<div className="mb-2 flex w-full flex-wrap gap-x-2 md:mb-2">
43+
{Array.from({ length: 3 }).map(() => (
4444
<div
4545
key={`post-skeleton-pill-${crypto.randomUUID()}`}
46-
className="h-5 w-2/12 rounded-full bg-[#88888820] md:h-7 md:w-1/12 "
46+
className="h-5 w-2/12 rounded-full bg-[#88888820] md:h-7 md:w-2/12"
4747
/>
4848
))}
4949
</div>
5050

51-
<div className="mb-1 h-3 w-11/12 rounded-full bg-[#88888820] md:h-5 " />
52-
<div className="mb-1 h-3 w-10/12 rounded-full bg-[#88888820] md:h-5 " />
53-
<div className="mb-1 h-3 w-11/12 rounded-full bg-[#88888820] md:h-5 " />
51+
<div className="mb-1 h-3 w-11/12 rounded-full bg-[#88888820] md:h-5" />
52+
<div className="mb-1 h-3 w-10/12 rounded-full bg-[#88888820] md:h-5" />
53+
<div className="mb-1 h-3 w-11/12 rounded-full bg-[#88888820] md:h-5" />
5454
</div>
5555

56-
<div className="ml-auto hidden rounded-lg bg-[#88888820] px-4 py-2 lg:block ">
57-
<div className="mb-6 h-10 w-10 rounded-full bg-[#88888820] " />
56+
<div className="ml-auto hidden px-4 py-2 md:block">
57+
<div className="mb-6 size-10 rounded-full bg-[#88888820]" />
58+
59+
<div className="mb-6 h-4 w-10 rounded-full bg-[#88888820]" />
5860
</div>
5961
</div>
6062
);

0 commit comments

Comments
 (0)