Skip to content

Commit 6391bed

Browse files
adithyaakrishnaadithyaakrishna
committed
chore: updated loading states
1 parent 5716eb7 commit 6391bed

File tree

7 files changed

+182
-87
lines changed

7 files changed

+182
-87
lines changed

‎apps/sim/app/(landing)/blog/[slug]/loading.tsx‎

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,55 @@ import { Skeleton } from '@/components/emcn'
33
export default function BlogPostLoading() {
44
return (
55
<article className='w-full'>
6-
<div className='mx-auto max-w-[1450px] px-6 pt-8'>
7-
<Skeleton className='h-[16px] w-[60px] rounded-[4px]' />
8-
<div className='mt-[24px] flex flex-col gap-8 md:flex-row md:gap-12'>
9-
<Skeleton className='aspect-[4/3] w-full rounded-[8px] md:w-[450px]' />
10-
<div className='flex flex-1 flex-col justify-center'>
11-
<Skeleton className='h-[48px] w-full rounded-[4px]' />
12-
<Skeleton className='mt-[8px] h-[48px] w-[80%] rounded-[4px]' />
13-
<div className='mt-[24px] flex items-center gap-[12px]'>
14-
<Skeleton className='h-[32px] w-[32px] rounded-full' />
15-
<Skeleton className='h-[16px] w-[100px] rounded-[4px]' />
6+
{/* Header area */}
7+
<div className='mx-auto max-w-[1450px] px-6 pt-8 sm:px-8 sm:pt-12 md:px-12 md:pt-16'>
8+
{/* Back link */}
9+
<div className='mb-6'>
10+
<Skeleton className='h-[16px] w-[60px] rounded-[4px] bg-[#2A2A2A]' />
11+
</div>
12+
{/* Image + title row */}
13+
<div className='flex flex-col gap-8 md:flex-row md:gap-12'>
14+
{/* Image */}
15+
<div className='w-full flex-shrink-0 md:w-[450px]'>
16+
<Skeleton className='aspect-[450/360] w-full rounded-lg bg-[#2A2A2A]' />
17+
</div>
18+
{/* Title + author */}
19+
<div className='flex flex-1 flex-col justify-between'>
20+
<div>
21+
<Skeleton className='h-[48px] w-full rounded-[4px] bg-[#2A2A2A]' />
22+
<Skeleton className='mt-[8px] h-[48px] w-[80%] rounded-[4px] bg-[#2A2A2A]' />
23+
</div>
24+
<div className='mt-4 flex items-center justify-between'>
25+
<div className='flex items-center gap-2'>
26+
<Skeleton className='h-[24px] w-[24px] rounded-full bg-[#2A2A2A]' />
27+
<Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[#2A2A2A]' />
28+
</div>
29+
<Skeleton className='h-[32px] w-[32px] rounded-[6px] bg-[#2A2A2A]' />
1630
</div>
1731
</div>
1832
</div>
19-
<Skeleton className='mt-[32px] h-[1px] w-full rounded-[1px]' />
20-
<div className='mt-[16px] flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
21-
<Skeleton className='h-[14px] w-[120px] rounded-[4px]' />
22-
<Skeleton className='h-[14px] w-[300px] rounded-[4px]' />
33+
{/* Divider */}
34+
<Skeleton className='mt-8 h-[1px] w-full bg-[#2A2A2A] sm:mt-12' />
35+
{/* Date + description */}
36+
<div className='flex flex-col gap-6 py-8 sm:flex-row sm:items-start sm:justify-between sm:gap-8 sm:py-10'>
37+
<Skeleton className='h-[16px] w-[120px] flex-shrink-0 rounded-[4px] bg-[#2A2A2A]' />
38+
<div className='flex-1 space-y-[8px]'>
39+
<Skeleton className='h-[20px] w-full rounded-[4px] bg-[#2A2A2A]' />
40+
<Skeleton className='h-[20px] w-[70%] rounded-[4px] bg-[#2A2A2A]' />
41+
</div>
2342
</div>
2443
</div>
25-
<div className='mx-auto max-w-[900px] px-6 pt-[48px] pb-20'>
44+
{/* Article body */}
45+
<div className='mx-auto max-w-[900px] px-6 pb-20 sm:px-8 md:px-12'>
2646
<div className='space-y-[16px]'>
27-
<Skeleton className='h-[16px] w-full rounded-[4px]' />
28-
<Skeleton className='h-[16px] w-[95%] rounded-[4px]' />
29-
<Skeleton className='h-[16px] w-[88%] rounded-[4px]' />
30-
<Skeleton className='h-[16px] w-full rounded-[4px]' />
31-
<Skeleton className='mt-[24px] h-[24px] w-[200px] rounded-[4px]' />
32-
<Skeleton className='h-[16px] w-full rounded-[4px]' />
33-
<Skeleton className='h-[16px] w-[92%] rounded-[4px]' />
34-
<Skeleton className='h-[16px] w-[85%] rounded-[4px]' />
47+
<Skeleton className='h-[16px] w-full rounded-[4px] bg-[#2A2A2A]' />
48+
<Skeleton className='h-[16px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
49+
<Skeleton className='h-[16px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
50+
<Skeleton className='h-[16px] w-full rounded-[4px] bg-[#2A2A2A]' />
51+
<Skeleton className='mt-[24px] h-[24px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
52+
<Skeleton className='h-[16px] w-full rounded-[4px] bg-[#2A2A2A]' />
53+
<Skeleton className='h-[16px] w-[92%] rounded-[4px] bg-[#2A2A2A]' />
54+
<Skeleton className='h-[16px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
3555
</div>
3656
</div>
3757
</article>

‎apps/sim/app/(landing)/blog/authors/[id]/loading.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@ const SKELETON_POST_COUNT = 4
55
export default function AuthorLoading() {
66
return (
77
<main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
8-
<div className='flex items-center gap-[12px]'>
9-
<Skeleton className='h-[40px] w-[40px] rounded-full' />
10-
<Skeleton className='h-[28px] w-[160px] rounded-[4px]' />
8+
<div className='mb-6 flex items-center gap-3'>
9+
<Skeleton className='h-[40px] w-[40px] rounded-full bg-[#2A2A2A]' />
10+
<Skeleton className='h-[32px] w-[160px] rounded-[4px] bg-[#2A2A2A]' />
1111
</div>
12-
<div className='mt-[32px] grid grid-cols-1 gap-8 sm:grid-cols-2'>
12+
<div className='grid grid-cols-1 gap-8 sm:grid-cols-2'>
1313
{Array.from({ length: SKELETON_POST_COUNT }).map((_, i) => (
14-
<div key={i} className='flex flex-col gap-[12px]'>
15-
<Skeleton className='aspect-[16/10] w-full rounded-[8px]' />
16-
<Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
17-
<Skeleton className='h-[20px] w-[200px] rounded-[4px]' />
14+
<div key={i} className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
15+
<Skeleton className='h-[160px] w-full rounded-none bg-[#2A2A2A]' />
16+
<div className='p-3'>
17+
<Skeleton className='mb-1 h-[12px] w-[80px] rounded-[4px] bg-[#2A2A2A]' />
18+
<Skeleton className='h-[14px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
19+
</div>
1820
</div>
1921
))}
2022
</div>

‎apps/sim/app/(landing)/blog/loading.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,25 @@ import { Skeleton } from '@/components/emcn'
22

33
const SKELETON_CARD_COUNT = 6
44

5-
export default function StudioLoading() {
5+
export default function BlogLoading() {
66
return (
77
<main className='mx-auto max-w-[1200px] px-6 py-12 sm:px-8 md:px-12'>
8-
<Skeleton className='h-[48px] w-[200px] rounded-[4px]' />
9-
<Skeleton className='mt-[8px] h-[20px] w-[360px] rounded-[4px]' />
10-
<div className='mt-[32px] grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3'>
8+
<Skeleton className='h-[48px] w-[100px] rounded-[4px] bg-[#2A2A2A]' />
9+
<Skeleton className='mt-3 h-[18px] w-[420px] rounded-[4px] bg-[#2A2A2A]' />
10+
<div className='mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
1111
{Array.from({ length: SKELETON_CARD_COUNT }).map((_, i) => (
12-
<div key={i} className='flex flex-col gap-[12px]'>
13-
<Skeleton className='aspect-[16/10] w-full rounded-[8px]' />
14-
<Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
15-
<Skeleton className='h-[20px] w-[200px] rounded-[4px]' />
16-
<Skeleton className='h-[14px] w-full rounded-[4px]' />
17-
<Skeleton className='h-[14px] w-[70%] rounded-[4px]' />
12+
<div key={i} className='flex flex-col overflow-hidden rounded-xl border border-[#2A2A2A]'>
13+
<Skeleton className='aspect-video w-full rounded-none bg-[#2A2A2A]' />
14+
<div className='flex flex-1 flex-col p-4'>
15+
<Skeleton className='mb-2 h-[12px] w-[80px] rounded-[4px] bg-[#2A2A2A]' />
16+
<Skeleton className='mb-1 h-[20px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
17+
<Skeleton className='mb-3 h-[14px] w-full rounded-[4px] bg-[#2A2A2A]' />
18+
<Skeleton className='h-[14px] w-[70%] rounded-[4px] bg-[#2A2A2A]' />
19+
<div className='mt-3 flex items-center gap-2'>
20+
<Skeleton className='h-[16px] w-[16px] rounded-full bg-[#2A2A2A]' />
21+
<Skeleton className='h-[12px] w-[80px] rounded-[4px] bg-[#2A2A2A]' />
22+
</div>
23+
</div>
1824
</div>
1925
))}
2026
</div>

‎apps/sim/app/(landing)/blog/tags/loading.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ const SKELETON_TAG_COUNT = 12
55
export default function TagsLoading() {
66
return (
77
<main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
8-
<Skeleton className='h-[38px] w-[180px] rounded-[4px]' />
9-
<div className='mt-[24px] flex flex-wrap gap-3'>
8+
<Skeleton className='mb-6 h-[32px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
9+
<div className='flex flex-wrap gap-3'>
1010
{Array.from({ length: SKELETON_TAG_COUNT }).map((_, i) => (
1111
<Skeleton
1212
key={i}
13-
className='h-[30px] rounded-full'
13+
className='h-[30px] rounded-full bg-[#2A2A2A]'
1414
style={{ width: `${60 + (i % 4) * 24}px` }}
1515
/>
1616
))}

‎apps/sim/app/(landing)/privacy/loading.tsx‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,56 @@ import { Skeleton } from '@/components/emcn'
22

33
export default function PrivacyLoading() {
44
return (
5-
<main className='min-h-screen bg-white text-gray-900'>
6-
<div className='px-12 pt-[40px] pb-[40px]'>
7-
<Skeleton className='mx-auto h-[48px] w-[240px] rounded-[4px]' />
8-
<div className='prose prose-gray mx-auto mt-[32px] space-y-8'>
9-
{Array.from({ length: 4 }).map((_, i) => (
10-
<div key={i} className='space-y-[12px]'>
11-
<Skeleton className='h-[24px] w-[200px] rounded-[4px]' />
12-
<Skeleton className='h-[16px] w-full rounded-[4px]' />
13-
<Skeleton className='h-[16px] w-[95%] rounded-[4px]' />
14-
<Skeleton className='h-[16px] w-[88%] rounded-[4px]' />
15-
<Skeleton className='h-[16px] w-full rounded-[4px]' />
5+
<main className='min-h-screen bg-[#1C1C1C] text-[#ECECEC]'>
6+
<div className='flex h-[52px] items-center border-[#2A2A2A] border-b px-6'>
7+
<Skeleton className='h-[22px] w-[60px] rounded-[4px] bg-[#2A2A2A]' />
8+
<div className='ml-auto flex items-center gap-[12px]'>
9+
<Skeleton className='h-[30px] w-[64px] rounded-[5px] bg-[#2A2A2A]' />
10+
<Skeleton className='h-[30px] w-[80px] rounded-[5px] bg-[#2A2A2A]' />
11+
</div>
12+
</div>
13+
<div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-[80px] sm:px-12'>
14+
<Skeleton className='mx-auto h-[48px] w-[280px] rounded-[4px] bg-[#2A2A2A]' />
15+
<div className='mt-12 space-y-8'>
16+
<div className='space-y-[10px]'>
17+
<Skeleton className='h-[15px] w-[180px] rounded-[4px] bg-[#2A2A2A]' />
18+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
19+
<Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
20+
<Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
21+
</div>
22+
<div className='mt-12 space-y-[10px]'>
23+
<Skeleton className='h-[28px] w-[320px] rounded-[4px] bg-[#2A2A2A]' />
24+
<div className='mt-4 space-y-[10px]'>
25+
<Skeleton className='h-[20px] w-[160px] rounded-[4px] bg-[#2A2A2A]' />
26+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
27+
<Skeleton className='h-[15px] w-[92%] rounded-[4px] bg-[#2A2A2A]' />
28+
<Skeleton className='h-[15px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
29+
</div>
30+
</div>
31+
<div className='mt-12 space-y-[10px]'>
32+
<Skeleton className='h-[28px] w-[260px] rounded-[4px] bg-[#2A2A2A]' />
33+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
34+
<Skeleton className='h-[15px] w-[90%] rounded-[4px] bg-[#2A2A2A]' />
35+
<div className='mt-4 space-y-[8px] pl-6'>
36+
<Skeleton className='h-[15px] w-[70%] rounded-[4px] bg-[#2A2A2A]' />
37+
<Skeleton className='h-[15px] w-[60%] rounded-[4px] bg-[#2A2A2A]' />
38+
<Skeleton className='h-[15px] w-[75%] rounded-[4px] bg-[#2A2A2A]' />
39+
<Skeleton className='h-[15px] w-[65%] rounded-[4px] bg-[#2A2A2A]' />
1640
</div>
17-
))}
41+
</div>
42+
<div className='mt-12 space-y-[10px]'>
43+
<Skeleton className='h-[28px] w-[300px] rounded-[4px] bg-[#2A2A2A]' />
44+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
45+
<Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
46+
<Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
47+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
48+
</div>
49+
<div className='mt-12 space-y-[10px]'>
50+
<Skeleton className='h-[28px] w-[220px] rounded-[4px] bg-[#2A2A2A]' />
51+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
52+
<Skeleton className='h-[15px] w-[93%] rounded-[4px] bg-[#2A2A2A]' />
53+
<Skeleton className='h-[15px] w-[80%] rounded-[4px] bg-[#2A2A2A]' />
54+
</div>
1855
</div>
1956
</div>
2057
</main>

‎apps/sim/app/(landing)/terms/loading.tsx‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,49 @@ import { Skeleton } from '@/components/emcn'
22

33
export default function TermsLoading() {
44
return (
5-
<main className='min-h-screen bg-white text-gray-900'>
6-
<div className='px-12 pt-[40px] pb-[40px]'>
7-
<Skeleton className='mx-auto h-[48px] w-[280px] rounded-[4px]' />
8-
<div className='prose prose-gray mx-auto mt-[32px] space-y-8'>
9-
{Array.from({ length: 4 }).map((_, i) => (
10-
<div key={i} className='space-y-[12px]'>
11-
<Skeleton className='h-[24px] w-[200px] rounded-[4px]' />
12-
<Skeleton className='h-[16px] w-full rounded-[4px]' />
13-
<Skeleton className='h-[16px] w-[95%] rounded-[4px]' />
14-
<Skeleton className='h-[16px] w-[88%] rounded-[4px]' />
15-
<Skeleton className='h-[16px] w-full rounded-[4px]' />
16-
</div>
17-
))}
5+
<main className='min-h-screen bg-[#1C1C1C] text-[#ECECEC]'>
6+
<div className='flex h-[52px] items-center border-[#2A2A2A] border-b px-6'>
7+
<Skeleton className='h-[22px] w-[60px] rounded-[4px] bg-[#2A2A2A]' />
8+
<div className='ml-auto flex items-center gap-[12px]'>
9+
<Skeleton className='h-[30px] w-[64px] rounded-[5px] bg-[#2A2A2A]' />
10+
<Skeleton className='h-[30px] w-[80px] rounded-[5px] bg-[#2A2A2A]' />
11+
</div>
12+
</div>
13+
<div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-[80px] sm:px-12'>
14+
<Skeleton className='mx-auto h-[48px] w-[320px] rounded-[4px] bg-[#2A2A2A]' />
15+
<div className='mt-12 space-y-8'>
16+
<div className='space-y-[10px]'>
17+
<Skeleton className='h-[15px] w-[180px] rounded-[4px] bg-[#2A2A2A]' />
18+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
19+
<Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
20+
<Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
21+
</div>
22+
<div className='mt-12 space-y-[10px]'>
23+
<Skeleton className='h-[28px] w-[140px] rounded-[4px] bg-[#2A2A2A]' />
24+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
25+
<Skeleton className='h-[15px] w-[92%] rounded-[4px] bg-[#2A2A2A]' />
26+
<Skeleton className='h-[15px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
27+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
28+
</div>
29+
<div className='mt-12 space-y-[10px]'>
30+
<Skeleton className='h-[28px] w-[260px] rounded-[4px] bg-[#2A2A2A]' />
31+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
32+
<Skeleton className='h-[15px] w-[90%] rounded-[4px] bg-[#2A2A2A]' />
33+
<Skeleton className='h-[15px] w-[75%] rounded-[4px] bg-[#2A2A2A]' />
34+
</div>
35+
<div className='mt-12 space-y-[10px]'>
36+
<Skeleton className='h-[28px] w-[380px] rounded-[4px] bg-[#2A2A2A]' />
37+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
38+
<Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
39+
<Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
40+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
41+
</div>
42+
<div className='mt-12 space-y-[10px]'>
43+
<Skeleton className='h-[28px] w-[300px] rounded-[4px] bg-[#2A2A2A]' />
44+
<Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
45+
<Skeleton className='h-[15px] w-[93%] rounded-[4px] bg-[#2A2A2A]' />
46+
<Skeleton className='h-[15px] w-[80%] rounded-[4px] bg-[#2A2A2A]' />
47+
</div>
1848
</div>
1949
</div>
2050
</main>

‎apps/sim/app/changelog/loading.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,31 @@ import { Skeleton } from '@/components/emcn'
22

33
export default function ChangelogLoading() {
44
return (
5-
<div className='min-h-screen bg-background'>
6-
<div className='grid md:grid-cols-2'>
7-
<div className='relative p-8 md:sticky md:top-0 md:h-dvh md:p-12'>
8-
<div className='flex h-full flex-col justify-center'>
9-
<Skeleton className='h-[48px] w-[200px] rounded-[4px]' />
10-
<Skeleton className='mt-[16px] h-[16px] w-[300px] rounded-[4px]' />
11-
<Skeleton className='mt-[4px] h-[16px] w-[260px] rounded-[4px]' />
12-
<Skeleton className='mt-[24px] h-[1px] w-full rounded-[1px]' />
13-
<div className='mt-[24px] space-y-[12px]'>
14-
<Skeleton className='h-[16px] w-[140px] rounded-[4px]' />
15-
<Skeleton className='h-[16px] w-[120px] rounded-[4px]' />
16-
<Skeleton className='h-[16px] w-[100px] rounded-[4px]' />
5+
<div className='min-h-screen'>
6+
<div className='relative grid md:grid-cols-2'>
7+
<div className='relative top-0 overflow-hidden border-[#2A2A2A] border-b px-6 py-16 sm:px-10 md:sticky md:h-dvh md:border-r md:border-b-0 md:px-12 md:py-24'>
8+
<div className='relative mx-auto h-full max-w-xl md:flex md:flex-col md:justify-center'>
9+
<Skeleton className='mt-6 h-[48px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
10+
<Skeleton className='mt-4 h-[14px] w-[300px] rounded-[4px] bg-[#2A2A2A]' />
11+
<Skeleton className='mt-[4px] h-[14px] w-[260px] rounded-[4px] bg-[#2A2A2A]' />
12+
<Skeleton className='mt-6 h-[1px] w-full bg-[#2A2A2A]' />
13+
<div className='mt-6 flex flex-wrap items-center gap-3'>
14+
<Skeleton className='h-[32px] w-[130px] rounded-[5px] bg-[#2A2A2A]' />
15+
<Skeleton className='h-[32px] w-[120px] rounded-[5px] bg-[#2A2A2A]' />
16+
<Skeleton className='h-[32px] w-[80px] rounded-[5px] bg-[#2A2A2A]' />
1717
</div>
1818
</div>
1919
</div>
20-
<div className='p-8 pl-8 md:p-12'>
20+
<div className='px-6 py-16 sm:px-10 md:px-12 md:py-24'>
2121
<div className='max-w-2xl space-y-[32px]'>
2222
{Array.from({ length: 4 }).map((_, i) => (
2323
<div key={i} className='space-y-[12px]'>
24-
<Skeleton className='h-[20px] w-[160px] rounded-[4px]' />
25-
<Skeleton className='h-[14px] w-[100px] rounded-[4px]' />
24+
<Skeleton className='h-[20px] w-[160px] rounded-[4px] bg-[#2A2A2A]' />
25+
<Skeleton className='h-[14px] w-[100px] rounded-[4px] bg-[#2A2A2A]' />
2626
<div className='space-y-[8px]'>
27-
<Skeleton className='h-[14px] w-full rounded-[4px]' />
28-
<Skeleton className='h-[14px] w-[90%] rounded-[4px]' />
29-
<Skeleton className='h-[14px] w-[75%] rounded-[4px]' />
27+
<Skeleton className='h-[14px] w-full rounded-[4px] bg-[#2A2A2A]' />
28+
<Skeleton className='h-[14px] w-[90%] rounded-[4px] bg-[#2A2A2A]' />
29+
<Skeleton className='h-[14px] w-[75%] rounded-[4px] bg-[#2A2A2A]' />
3030
</div>
3131
</div>
3232
))}

0 commit comments

Comments
 (0)