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

Update MediaCard.tsx

Browse source
This commit is contained in:
Pas 2025-12-24 11:31:22 -07:00
parent 33301edfe8
commit 25139cc4cc
1 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/media/MediaCard.tsx
View file

@ -50,6 +50,8 @@ function useIntersectionObserver(options: IntersectionObserverInit = {}) {
// Skeleton Component
export function MediaCardSkeleton() {
const enableMinimalCards = usePreferencesStore((s) => s.enableMinimalCards);
return (
<Flare.Base className="group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300">
<Flare.Light
@ -61,21 +63,30 @@ export function MediaCardSkeleton() {
<Flare.Child className="pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300 opacity-60">
<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" />
<div
className={classNames(
"relative pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground",
enableMinimalCards ? "" : "mb-4",
)}
/>
{/* 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>
{!enableMinimalCards && (
<>
{/* 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>
{/* 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>
</Flare.Child>
</Flare.Base>