Skip to content

Commit 8da1ba2

Browse files
StackOverflowIsBetterThanAnyAIStackOverflowIsBetterThanAnyAI
committed
skeleton for top 10 posts
1 parent a36ccde commit 8da1ba2

File tree

2 files changed

+100
-68
lines changed

2 files changed

+100
-68
lines changed

‎src/components/feed/Feed.tsx‎

Lines changed: 87 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
CarouselNext,
1919
CarouselPrevious,
2020
} from '@/components/ui/carousel'
21+
import { Skeleton } from '@/components/ui/skeleton'
2122
import fetchFeedItems from '@/api/fetchFeedItems'
2223
import { FeedItemsType } from '@/types/types'
2324
import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
@@ -69,75 +70,93 @@ const Feed = () => {
6970
className="w-full flex flex-col items-center gap-8 lg:gap-12 max-w-7xl relative isolate bg-stone-300 text-stone-950 lg:rounded-lg p-3 sm:p-4 lg:p-6
7071
drop-shadow-stone-900 drop-shadow-sm"
7172
>
72-
{feedItems.length > 0 ? (
73-
<>
74-
<div className="w-full flex flex-col items-center px-16 py-6 bg-stone-400 rounded-lg shadow-md shadow-stone-600">
75-
<div className="w-full flex flex-col gap-4 max-w-3xl">
76-
<h2 className="self-start text-very-large font-semibold underline">
77-
Top 10 Posts of the Week
78-
</h2>
79-
<div className="w-full">
80-
<Carousel>
81-
<CarouselContent>
82-
{feedItems.slice(0, 10).map((item) => (
83-
<CarouselItem key={item.id}>
84-
<Card>
85-
<CardHeader>
86-
<CardTitle>
87-
{item.name}
88-
</CardTitle>
89-
<CardDescription>
90-
{item.email}
91-
</CardDescription>
92-
</CardHeader>
93-
<CardContent>
94-
<p>{item.body}</p>
95-
</CardContent>
96-
<CardFooter>
97-
<Badge variant="outline">
98-
Post #{item.id}
99-
</Badge>
100-
</CardFooter>
101-
</Card>
102-
</CarouselItem>
103-
))}
104-
</CarouselContent>
105-
<CarouselPrevious />
106-
<CarouselNext />
107-
</Carousel>
108-
</div>
109-
</div>
73+
<div className="w-full flex flex-col items-center px-14 sm:px-16 py-6 bg-stone-400 rounded-lg shadow-md shadow-stone-600">
74+
<div className="w-full flex flex-col gap-4 max-w-3xl">
75+
<h2 className="self-start text-very-large font-semibold underline">
76+
Top 10 Posts of the Week
77+
</h2>
78+
<div className="w-full">
79+
<Carousel>
80+
<CarouselContent>
81+
{feedItems.length > 0 ? (
82+
feedItems.slice(0, 10).map((item) => (
83+
<CarouselItem key={item.id}>
84+
<Card>
85+
<CardHeader>
86+
<CardTitle>
87+
{item.name}
88+
</CardTitle>
89+
<CardDescription>
90+
{item.email}
91+
</CardDescription>
92+
</CardHeader>
93+
<CardContent>
94+
<p>{item.body}</p>
95+
</CardContent>
96+
<CardFooter>
97+
<Badge variant="outline">
98+
Post #{item.id}
99+
</Badge>
100+
</CardFooter>
101+
</Card>
102+
</CarouselItem>
103+
))
104+
) : (
105+
<CarouselItem>
106+
<Card>
107+
<CardHeader>
108+
<CardTitle>
109+
<Skeleton className="h-[20px] w-[196px] max-w-3/5 rounded-full" />
110+
</CardTitle>
111+
<CardDescription>
112+
<Skeleton className="h-[16px] w-[144px] max-w-2/5 rounded-full" />
113+
</CardDescription>
114+
</CardHeader>
115+
<CardContent className="flex flex-col gap-2">
116+
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
117+
<Skeleton className="h-[18px] w-[512px] max-w-4/5 rounded-full" />
118+
<Skeleton className="h-[18px] w-[128px] max-w-4/5 rounded-full" />
119+
</CardContent>
120+
<CardFooter>
121+
<Skeleton className="h-[22px] w-[48px] max-w-2/5 rounded-full" />
122+
</CardFooter>
123+
</Card>
124+
</CarouselItem>
125+
)}
126+
</CarouselContent>
127+
<CarouselPrevious />
128+
<CarouselNext />
129+
</Carousel>
110130
</div>
111-
{feedItems.length > 10 && (
112-
<div className="flex flex-col gap-4 lg:gap-6">
113-
<h2 className="self-start text-very-large font-semibold underline px-4">
114-
More Hot Posts
115-
</h2>
116-
<div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,448px),1fr))] grid-flow-row-dense w-full gap-4 lg:gap-6">
117-
{feedItems.slice(10).map((item) => (
118-
<Card key={item.id}>
119-
<CardHeader>
120-
<CardTitle>{item.name}</CardTitle>
121-
<CardDescription>
122-
{item.email}
123-
</CardDescription>
124-
</CardHeader>
125-
<CardContent>
126-
<p>{item.body}</p>
127-
</CardContent>
128-
<CardFooter>
129-
<Badge variant="outline">
130-
Post #{item.id}
131-
</Badge>
132-
</CardFooter>
133-
</Card>
134-
))}
135-
</div>
136-
</div>
137-
)}
138-
</>
139-
) : null}
140-
131+
</div>
132+
</div>
133+
{feedItems.length > 10 && (
134+
<div className="flex flex-col gap-4 lg:gap-6">
135+
<h2 className="self-start text-very-large font-semibold underline px-4">
136+
More Hot Posts
137+
</h2>
138+
<div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,448px),1fr))] grid-flow-row-dense w-full gap-4 lg:gap-6">
139+
{feedItems.slice(10).map((item) => (
140+
<Card key={item.id}>
141+
<CardHeader>
142+
<CardTitle>{item.name}</CardTitle>
143+
<CardDescription>
144+
{item.email}
145+
</CardDescription>
146+
</CardHeader>
147+
<CardContent>
148+
<p>{item.body}</p>
149+
</CardContent>
150+
<CardFooter>
151+
<Badge variant="outline">
152+
Post #{item.id}
153+
</Badge>
154+
</CardFooter>
155+
</Card>
156+
))}
157+
</div>
158+
</div>
159+
)}
141160
{isLoading && (
142161
<div className="p-2 pt-4">
143162
<FetchLoading ariaLabel="Loading more Items." />

‎src/components/ui/skeleton.tsx‎

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

0 commit comments

Comments
 (0)