From fa01a0d4a0b1b0d67b7372e075506b44b0591b73 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Thu, 5 Mar 2026 10:16:54 -0500
Subject: [PATCH] Fix loading skeletons to match current UI across all pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 app/(pages)/explore/loading.tsx  | 13 +++++---
 app/(pages)/settings/loading.tsx | 46 +++++++++++++++++++--------
 components/skeletons.tsx         | 53 +++++++++++++++++++++++---------
 3 files changed, 80 insertions(+), 32 deletions(-)

diff --git a/app/(pages)/explore/loading.tsx b/app/(pages)/explore/loading.tsx
index 72039bc..521e3d8 100644
--- a/app/(pages)/explore/loading.tsx
+++ b/app/(pages)/explore/loading.tsx
@@ -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>
 
diff --git a/app/(pages)/settings/loading.tsx b/app/(pages)/settings/loading.tsx
index f557de5..6ce91f2 100644
--- a/app/(pages)/settings/loading.tsx
+++ b/app/(pages)/settings/loading.tsx
@@ -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>
   );
 }
diff --git a/components/skeletons.tsx b/components/skeletons.tsx
index 68dd86c..efee6be 100644
--- a/components/skeletons.tsx
+++ b/components/skeletons.tsx
@@ -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 />