Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-03-11 17:55:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add discover media carousel skeleton

Browse source
This commit is contained in:
Pas 2025-10-19 17:57:21 -06:00
parent f71b287c6a
commit ba3ca004cb
1 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/pages/discover/components/MediaCarousel.tsx
View file

@ -55,9 +55,27 @@ interface MediaCarouselProps {
function MediaCardSkeleton() {
return (
<div className="relative mt-4 group cursor-default user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto">
<div className="animate-pulse">
<div className="w-full aspect-[2/3] bg-mediaCard-hoverBackground rounded-lg" />
<div className="mt-2 h-4 bg-mediaCard-hoverBackground rounded w-3/4" />
<div className="group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300">
<div className="pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300">
<div className="animate-pulse">
{/* Poster skeleton - matches MediaCard poster dimensions exactly */}
<div className="relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground" />
{/* Title skeleton - matches MediaCard title dimensions */}
<div className="mb-1">
<div className="h-4 bg-mediaCard-hoverBackground rounded w-full mb-1" />
<div className="h-4 bg-mediaCard-hoverBackground rounded w-3/4 mb-1" />
<div className="h-4 bg-mediaCard-hoverBackground rounded w-1/2" />
</div>
{/* Dot list skeleton - matches MediaCard dot list */}
<div className="flex items-center gap-1">
<div className="h-3 bg-mediaCard-hoverBackground rounded w-12" />
<div className="h-1 w-1 bg-mediaCard-hoverBackground rounded-full" />
<div className="h-3 bg-mediaCard-hoverBackground rounded w-8" />
</div>
</div>
</div>
</div>
</div>
);