Skip to content

Commit 9f31d69

Browse files
StackOverflowIsBetterThanAnyAIStackOverflowIsBetterThanAnyAI
committed
better fitting skeletons
1 parent 38a6581 commit 9f31d69

File tree

2 files changed

+17
-30
lines changed

2 files changed

+17
-30
lines changed

‎src/components/quote/Quote.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ const Quote = () => {
4545
<p className="self-end px-4 py-1"> - unknown author</p>
4646
</div>
4747
) : (
48-
<div className="flex flex-col gap-2">
49-
<Skeleton className="h-[18px] w-full rounded-full" />
48+
<div className="flex flex-col gap-4 lg:mt-1">
49+
<Skeleton className="h-[18px] w-4/5 m-auto rounded-full" />
50+
<Skeleton className="h-[18px] w-2/5 m-auto rounded-full" />
5051
<Skeleton className="self-end h-[18px] w-32 rounded-full" />
5152
</div>
5253
)}

‎src/components/users/Users.tsx‎

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -164,36 +164,22 @@ const Users = () => {
164164
<Card className="gap-4 h-full">
165165
<CardHeader>
166166
<CardTitle>
167-
<Skeleton className="h-[20px] w-[196px] max-w-3/5 rounded-full" />
167+
<Skeleton className="h-[20px] w-[172px] max-w-3/5 mb-6 rounded-full" />
168+
<Skeleton className="h-[20px] w-[172px] max-w-3/5 mb-6 rounded-full" />
169+
<Skeleton className="h-[16px] w-[128px] max-w-2/5 mb-2 rounded-full" />
170+
<Skeleton className="h-[16px] w-[96px] max-w-1/5 mb-10 mt-12 sm:mt-0 sm:mb-7 md:mb-8 lg:mb-6 rounded-full" />
171+
<Skeleton className="h-[4px] w-full mb-6 rounded-none border-b-2 bg-transparent" />
172+
<Skeleton className="h-[20px] w-[172px] max-w-3/5 mb-10 mt-12 sm:mt-0 sm:mb-7 md:mb-8 lg:mb-6 rounded-full" />
173+
<Skeleton className="h-[4px] w-full mb-6 rounded-none border-b-2 bg-transparent" />
174+
<Skeleton className="h-[20px] w-[172px] max-w-3/5 mb-10 mt-12 sm:mt-0 sm:mb-7 md:mb-8 lg:mb-6 rounded-full" />
175+
<Skeleton className="h-[4px] w-full mb-6 rounded-none border-b-2 bg-transparent" />
176+
<Skeleton className="h-[20px] w-[172px] max-w-3/5 mb-10 mt-12 sm:mt-0 sm:mb-7 md:mb-8 lg:mb-6 rounded-full" />
177+
<Skeleton className="h-[4px] w-full mb-6 rounded-none border-b-2 bg-transparent" />
178+
<Skeleton className="h-[20px] w-[172px] max-w-3/5 mb-10 mt-12 sm:mt-0 sm:mb-7 md:mb-8 lg:mb-6 rounded-full" />
179+
<Skeleton className="h-[4px] w-full mb-6 rounded-none border-b-2 bg-transparent" />
180+
<Skeleton className="h-[20px] w-[172px] max-w-3/5 rounded-full" />
168181
</CardTitle>
169-
<CardDescription>
170-
<Skeleton className="h-[16px] w-[144px] max-w-2/5 rounded-full" />
171-
</CardDescription>
172182
</CardHeader>
173-
<CardContent className="flex flex-col gap-2">
174-
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
175-
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
176-
<Skeleton className="h-[18px] w-[128px] max-w-4/5 rounded-full" />
177-
</CardContent>
178-
<CardFooter>
179-
<Skeleton className="h-[22px] w-[48px] max-w-2/5 rounded-full" />
180-
</CardFooter>
181-
<CardHeader>
182-
<CardTitle>
183-
<Skeleton className="h-[20px] w-[196px] max-w-3/5 rounded-full" />
184-
</CardTitle>
185-
<CardDescription>
186-
<Skeleton className="h-[16px] w-[144px] max-w-2/5 rounded-full" />
187-
</CardDescription>
188-
</CardHeader>
189-
<CardContent className="flex flex-col gap-2">
190-
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
191-
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
192-
<Skeleton className="h-[18px] w-[128px] max-w-4/5 rounded-full" />
193-
</CardContent>
194-
<CardFooter>
195-
<Skeleton className="h-[22px] w-[48px] max-w-2/5 rounded-full" />
196-
</CardFooter>
197183
</Card>
198184
)}
199185
</div>

0 commit comments

Comments
 (0)