pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Update MediaCard.tsx
+24
-13
+24
-13
src/components/media/MediaCard.tsx
+24
-13
src/components/media/MediaCard.tsx
···
50
50
51
51
// Skeleton Component
52
52
export function MediaCardSkeleton() {
53
+
const enableMinimalCards = usePreferencesStore((s) => s.enableMinimalCards);
54
+
53
55
return (
54
56
<Flare.Base className="group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300">
55
57
<Flare.Light
···
61
63
<Flare.Child className="pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300 opacity-60">
62
64
<div className="animate-pulse">
63
65
{/* Poster skeleton - matches MediaCard poster dimensions exactly */}
64
-
<div className="relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground" />
66
+
<div
67
+
className={classNames(
68
+
"relative pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground",
69
+
enableMinimalCards ? "" : "mb-4",
70
+
)}
71
+
/>
65
72
66
-
{/* Title skeleton - matches MediaCard title dimensions */}
67
-
<div className="mb-1">
68
-
<div className="h-4 bg-mediaCard-hoverBackground rounded w-full mb-1" />
69
-
<div className="h-4 bg-mediaCard-hoverBackground rounded w-3/4 mb-1" />
70
-
<div className="h-4 bg-mediaCard-hoverBackground rounded w-1/2" />
71
-
</div>
73
+
{!enableMinimalCards && (
74
+
<>
75
+
{/* Title skeleton - matches MediaCard title dimensions */}
76
+
<div className="mb-1">
77
+
<div className="h-4 bg-mediaCard-hoverBackground rounded w-full mb-1" />
78
+
<div className="h-4 bg-mediaCard-hoverBackground rounded w-3/4 mb-1" />
79
+
<div className="h-4 bg-mediaCard-hoverBackground rounded w-1/2" />
80
+
</div>
72
81
73
-
{/* Dot list skeleton - matches MediaCard dot list */}
74
-
<div className="flex items-center gap-1">
75
-
<div className="h-3 bg-mediaCard-hoverBackground rounded w-12" />
76
-
<div className="h-1 w-1 bg-mediaCard-hoverBackground rounded-full" />
77
-
<div className="h-3 bg-mediaCard-hoverBackground rounded w-8" />
78
-
</div>
82
+
{/* Dot list skeleton - matches MediaCard dot list */}
83
+
<div className="flex items-center gap-1">
84
+
<div className="h-3 bg-mediaCard-hoverBackground rounded w-12" />
85
+
<div className="h-1 w-1 bg-mediaCard-hoverBackground rounded-full" />
86
+
<div className="h-3 bg-mediaCard-hoverBackground rounded w-8" />
87
+
</div>
88
+
</>
89
+
)}
79
90
</div>
80
91
</Flare.Child>
81
92
</Flare.Base>