Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-05-14 07:51:12 +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 // Skeleton Component
export function MediaCardSkeleton() { export function MediaCardSkeleton() {
const enableMinimalCards = usePreferencesStore((s) => s.enableMinimalCards);
return ( return (
<Flare.Base className="group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300"> <Flare.Base className="group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300">
<Flare.Light <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"> <Flare.Child className="pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300 opacity-60">
<div className="animate-pulse"> <div className="animate-pulse">
{/* Poster skeleton - matches MediaCard poster dimensions exactly */} {/* 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 */} {!enableMinimalCards && (
<div className="mb-1"> <>
<div className="h-4 bg-mediaCard-hoverBackground rounded w-full mb-1" /> {/* Title skeleton - matches MediaCard title dimensions */}
<div className="h-4 bg-mediaCard-hoverBackground rounded w-3/4 mb-1" /> <div className="mb-1">
<div className="h-4 bg-mediaCard-hoverBackground rounded w-1/2" /> <div className="h-4 bg-mediaCard-hoverBackground rounded w-full mb-1" />
</div> <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 */} {/* Dot list skeleton - matches MediaCard dot list */}
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<div className="h-3 bg-mediaCard-hoverBackground rounded w-12" /> <div className="h-3 bg-mediaCard-hoverBackground rounded w-12" />
<div className="h-1 w-1 bg-mediaCard-hoverBackground rounded-full" /> <div className="h-1 w-1 bg-mediaCard-hoverBackground rounded-full" />
<div className="h-3 bg-mediaCard-hoverBackground rounded w-8" /> <div className="h-3 bg-mediaCard-hoverBackground rounded w-8" />
</div> </div>
</>
)}
</div> </div>
</Flare.Child> </Flare.Child>
</Flare.Base> </Flare.Base>