jake/sofa
1
Fork 0
mirror of https://github.com/jakejarvis/sofa.git synced 2026-08-29 01:35:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix loading skeletons to match current UI across all pages

Browse Source 
- Stats grid: sm:grid-cols-4 → lg:grid-cols-4 to match actual breakpoint
- Continue watching cards: border → ring-1 to match actual card styling
- Continue watching section: add carousel-like margins (-mx-4/px-4)
- Title detail: full-viewport backdrop, responsive poster (120px/220px),
  metadata row + star rating instead of two generic buttons
- Explore hero: full-viewport width matching HeroBanner component
- Explore rows: add icon placeholders, carousel-like margins, genre chip overflow
- Settings: icon+label section headings, 3 integration cards instead of 2
- Dashboard: add icon placeholders to section headings, fix mt-2 → mt-1
- Extract shared SectionHeading helper for icon+text skeleton pattern

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-05 10:16:54 -05:00
co-authored by Claude Opus 4.6
parent dfc0f67527
commit fa01a0d4a0
3 changed files with 80 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(pages)/explore/loading.tsx
+8 -5
View File
@@ -4,9 +4,12 @@ import { Skeleton } from "@/components/ui/skeleton";
function TitleRowSkeleton({ withGenreChips }: { withGenreChips?: boolean }) {
return (
<div className="space-y-4">
<Skeleton className="h-7 w-40" />
<div className="flex items-center gap-2">
<Skeleton className="size-5 rounded" />
<Skeleton className="h-6 w-40" />
</div>
{withGenreChips && (
<div className="flex gap-2">
<div className="-mx-4 flex gap-2 overflow-x-hidden px-4 sm:-mx-0 sm:flex-wrap sm:px-0">
{Array.from({ length: 7 }).map((_, i) => (
<Skeleton
// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
@@ -16,7 +19,7 @@ function TitleRowSkeleton({ withGenreChips }: { withGenreChips?: boolean }) {
))}
</div>
)}
<div className="flex gap-4">
<div className="-mx-4 flex gap-4 overflow-hidden px-4 sm:-mx-0 sm:px-0">
{Array.from({ length: 6 }).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
<div key={`card-${i}`} className="w-[140px] shrink-0 sm:w-[160px]">
@@ -31,8 +34,8 @@ function TitleRowSkeleton({ withGenreChips }: { withGenreChips?: boolean }) {
export default function ExploreLoading() {
return (
<div className="space-y-10">
{/* Hero skeleton */}
<div className="-mx-4 -mt-6 sm:-mx-6">
{/* Hero skeleton — full viewport width like the actual HeroBanner */}
<div className="-mt-6 mb-4 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)]">
<Skeleton className="aspect-[21/9] min-h-[280px] max-h-[420px] w-full rounded-none" />
</div>
app/(pages)/settings/loading.tsx
+34 -12
View File
@@ -1,26 +1,48 @@
import { Skeleton } from "@/components/ui/skeleton";
function SectionSkeleton({
headingWidth,
children,
}: {
headingWidth: string;
children: React.ReactNode;
}) {
return (
<div>
<div className="mb-3 flex items-center gap-2">
<Skeleton className="size-4 rounded" />
<Skeleton className={`h-3.5 ${headingWidth}`} />
</div>
{children}
</div>
);
}
export default function SettingsLoading() {
return (
<div className="mx-auto max-w-2xl space-y-8">
{/* Header */}
<div>
<Skeleton className="h-9 w-40" />
<Skeleton className="mt-2 h-4 w-64" />
<div className="flex items-center gap-2">
<Skeleton className="size-5 rounded" />
<Skeleton className="h-9 w-40" />
</div>
<Skeleton className="mt-1 h-4 w-64" />
</div>
{/* Account card */}
<div className="space-y-3">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-28 w-full rounded-xl" />
</div>
<SectionSkeleton headingWidth="w-16">
<Skeleton className="h-[76px] w-full rounded-xl" />
</SectionSkeleton>
{/* Media server cards */}
<div className="space-y-3">
<Skeleton className="h-4 w-28" />
<Skeleton className="h-16 w-full rounded-xl" />
<Skeleton className="h-16 w-full rounded-xl" />
</div>
{/* Integrations cards */}
<SectionSkeleton headingWidth="w-24">
<div className="space-y-3">
<Skeleton className="h-16 w-full rounded-xl" />
<Skeleton className="h-16 w-full rounded-xl" />
<Skeleton className="h-16 w-full rounded-xl" />
</div>
</SectionSkeleton>
</div>
);
}
components/skeletons.tsx
+38 -15
View File
@@ -1,5 +1,14 @@
import { Skeleton } from "@/components/ui/skeleton";
function SectionHeading({ width = "w-32" }: { width?: string }) {
return (
<div className="flex items-center gap-2">
<Skeleton className="size-5 rounded" />
<Skeleton className={`h-6 ${width}`} />
</div>
);
}
export function TitleCardSkeleton() {
return (
<div className="overflow-hidden rounded-xl bg-card ring-1 ring-white/[0.06]">
@@ -14,7 +23,7 @@ export function TitleCardSkeleton() {
export function ContinueWatchingSkeleton() {
return (
<div className="w-[calc(100vw-3rem)] shrink-0 overflow-hidden rounded-xl border border-border/30 bg-card/50 sm:w-72">
<div className="w-[calc(100vw-3rem)] shrink-0 overflow-hidden rounded-xl bg-card/50 ring-1 ring-white/[0.06] sm:w-72">
<Skeleton className="aspect-video w-full rounded-none" />
<div className="flex items-center gap-3 p-3">
<div className="min-w-0 flex-1 space-y-2">
@@ -28,12 +37,14 @@ export function ContinueWatchingSkeleton() {
}
export function StatCardSkeleton() {
return <Skeleton className="h-24 w-full rounded-xl" />;
return (
<Skeleton className="h-[88px] w-full rounded-xl border border-border/30" />
);
}
export function StatsSectionSkeleton() {
return (
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
<div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
<StatCardSkeleton />
<StatCardSkeleton />
<StatCardSkeleton />
@@ -45,8 +56,8 @@ export function StatsSectionSkeleton() {
export function ContinueWatchingSectionSkeleton() {
return (
<div className="space-y-4">
<Skeleton className="h-6 w-40" />
<div className="flex gap-4 overflow-hidden">
<SectionHeading width="w-40" />
<div className="-mx-4 flex gap-4 overflow-hidden px-4 sm:-mx-0 sm:px-0">
<ContinueWatchingSkeleton />
<ContinueWatchingSkeleton />
<ContinueWatchingSkeleton />
@@ -59,7 +70,7 @@ export function ContinueWatchingSectionSkeleton() {
export function TitleGridSectionSkeleton() {
return (
<div className="space-y-4">
<Skeleton className="h-6 w-32" />
<SectionHeading />
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
<TitleCardSkeleton />
<TitleCardSkeleton />
@@ -90,20 +101,32 @@ export function RecommendationsSkeleton() {
export function TitleDetailSkeleton() {
return (
<div className="space-y-10">
<Skeleton className="-mx-4 -mt-6 h-72 sm:h-96" />
<div className="flex flex-col gap-8 sm:flex-row">
<Skeleton className="h-[330px] w-[220px] shrink-0 rounded-xl" />
<Skeleton className="-mt-6 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)] h-80 rounded-none sm:h-[28rem]" />
<div className="flex flex-row gap-4 sm:gap-8">
<Skeleton className="h-[180px] w-[120px] shrink-0 rounded-xl sm:h-[330px] sm:w-[220px]" />
<div className="flex-1 space-y-5">
<Skeleton className="h-12 w-2/3" />
<Skeleton className="h-5 w-1/3" />
<div>
<Skeleton className="h-8 w-2/3 sm:h-12" />
<div className="mt-2 flex items-center gap-3">
<Skeleton className="h-5 w-14 rounded" />
<Skeleton className="h-4 w-10" />
<Skeleton className="h-4 w-16" />
</div>
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-5/6" />
<Skeleton className="h-4 w-4/6" />
</div>
<div className="flex gap-3">
<Skeleton className="h-9 w-32 rounded-lg" />
<Skeleton className="h-9 w-32 rounded-lg" />
<div className="flex items-center gap-3">
<Skeleton className="h-9 w-28 rounded-lg" />
<Skeleton className="h-6 w-px" />
<div className="flex gap-1">
{Array.from({ length: 5 }).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton
<Skeleton key={i} className="size-5 rounded" />
))}
</div>
</div>
</div>
</div>
@@ -116,7 +139,7 @@ export function DashboardSkeleton() {
<div className="space-y-10">
<div>
<Skeleton className="h-9 w-64" />
<Skeleton className="mt-2 h-4 w-48" />
<Skeleton className="mt-1 h-4 w-48" />
</div>
<StatsSectionSkeleton />
<ContinueWatchingSectionSkeleton />