Skip to content

Commit 2936a95

Browse files
StackOverflowIsBetterThanAnyAIStackOverflowIsBetterThanAnyAI
committed
skeleton
1 parent 8e0c2a8 commit 2936a95

File tree

1 file changed

+83
-26
lines changed

1 file changed

+83
-26
lines changed

‎src/components/users/Users.tsx‎

Lines changed: 83 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
CardHeader,
1414
CardTitle,
1515
} from '@/components/ui/card'
16+
import { Skeleton } from '@/components/ui/skeleton'
1617
import fetchUsers from '@/api/fetchUsers'
1718
import { ContextTopUsers } from '@/context/ContextTopUsers'
1819
import { UsersType } from '@/types/types'
@@ -62,31 +63,52 @@ const Users = () => {
6263
Most Active Users
6364
</h2>
6465
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
65-
{SCREEN_WIDTH !== 'MOBILE' && (
66-
<div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
67-
{users.length > 0
68-
? users.slice(0, 4).map((item) => (
69-
<Card key={item.id} className="gap-4">
70-
<CardHeader>
71-
<CardTitle>
72-
{item.name}
73-
</CardTitle>
74-
<CardDescription>
75-
{item.email}
76-
</CardDescription>
77-
</CardHeader>
78-
<CardContent>
79-
<p>{item.company.name}</p>
80-
<p>{item.company.bs}</p>
81-
</CardContent>
82-
<CardFooter>
83-
{item.website}
84-
</CardFooter>
85-
</Card>
86-
))
87-
: null}
88-
</div>
89-
)}
66+
<div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
67+
{users.length > 0
68+
? users.slice(0, 4).map((item) => (
69+
<Card
70+
key={item.id}
71+
className="gap-4 hidden sm:flex"
72+
>
73+
<CardHeader>
74+
<CardTitle>{item.name}</CardTitle>
75+
<CardDescription>
76+
{item.email}
77+
</CardDescription>
78+
</CardHeader>
79+
<CardContent>
80+
<p>{item.company.name}</p>
81+
<p>{item.company.bs}</p>
82+
</CardContent>
83+
<CardFooter>
84+
{item.website}
85+
</CardFooter>
86+
</Card>
87+
))
88+
: Array.from({ length: 4 }).map((_, i) => (
89+
<Card
90+
className="gap-4 hidden sm:flex"
91+
key={i}
92+
>
93+
<CardHeader>
94+
<CardTitle>
95+
<Skeleton className="h-[20px] w-[196px] max-w-3/5 rounded-full" />
96+
</CardTitle>
97+
<CardDescription>
98+
<Skeleton className="h-[16px] w-[144px] max-w-2/5 rounded-full" />
99+
</CardDescription>
100+
</CardHeader>
101+
<CardContent className="flex flex-col gap-2">
102+
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
103+
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
104+
<Skeleton className="h-[18px] w-[128px] max-w-4/5 rounded-full" />
105+
</CardContent>
106+
<CardFooter>
107+
<Skeleton className="h-[22px] w-[48px] max-w-2/5 rounded-full" />
108+
</CardFooter>
109+
</Card>
110+
))}
111+
</div>
90112
<div className="flex flex-col gap-4">
91113
{users.length > 4 ? (
92114
<Card className="h-full">
@@ -140,7 +162,42 @@ const Users = () => {
140162
</Accordion>
141163
</CardContent>
142164
</Card>
143-
) : null}
165+
) : (
166+
<Card className="gap-4 h-full">
167+
<CardHeader>
168+
<CardTitle>
169+
<Skeleton className="h-[20px] w-[196px] max-w-3/5 rounded-full" />
170+
</CardTitle>
171+
<CardDescription>
172+
<Skeleton className="h-[16px] w-[144px] max-w-2/5 rounded-full" />
173+
</CardDescription>
174+
</CardHeader>
175+
<CardContent className="flex flex-col gap-2">
176+
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
177+
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
178+
<Skeleton className="h-[18px] w-[128px] max-w-4/5 rounded-full" />
179+
</CardContent>
180+
<CardFooter>
181+
<Skeleton className="h-[22px] w-[48px] max-w-2/5 rounded-full" />
182+
</CardFooter>
183+
<CardHeader>
184+
<CardTitle>
185+
<Skeleton className="h-[20px] w-[196px] max-w-3/5 rounded-full" />
186+
</CardTitle>
187+
<CardDescription>
188+
<Skeleton className="h-[16px] w-[144px] max-w-2/5 rounded-full" />
189+
</CardDescription>
190+
</CardHeader>
191+
<CardContent className="flex flex-col gap-2">
192+
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
193+
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
194+
<Skeleton className="h-[18px] w-[128px] max-w-4/5 rounded-full" />
195+
</CardContent>
196+
<CardFooter>
197+
<Skeleton className="h-[22px] w-[48px] max-w-2/5 rounded-full" />
198+
</CardFooter>
199+
</Card>
200+
)}
144201
</div>
145202
</div>
146203
</div>

0 commit comments

Comments
 (0)