From 0d42e351b318302098c585dc5d9730cc741ae8d3 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Wed, 4 Feb 2026 22:15:54 +0900
Subject: refactor(ui): replace LoadingSpinner with skeleton fallbacks in
 Suspense

Reduce layout shift during data loading by using content-shaped
skeleton placeholders instead of generic spinners in DeckDetailPage,
DeckCardsPage, and StudyPage.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/client/pages/DeckDetailPage.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

(limited to 'src/client/pages/DeckDetailPage.tsx')

diff --git a/src/client/pages/DeckDetailPage.tsx b/src/client/pages/DeckDetailPage.tsx
index 97f8378..792bbe2 100644
--- a/src/client/pages/DeckDetailPage.tsx
+++ b/src/client/pages/DeckDetailPage.tsx
@@ -55,14 +55,36 @@ function DeckContent({ deckId }: { deckId: string }) {
 		<div className="animate-fade-in">
 			{/* Deck Header */}
 			<ErrorBoundary>
-				<Suspense fallback={<LoadingSpinner />}>
+				<Suspense
+					fallback={
+						<div className="mb-8">
+							<div className="h-9 w-48 bg-muted/20 rounded animate-pulse mb-2" />
+							<div className="h-5 w-64 bg-muted/20 rounded animate-pulse" />
+						</div>
+					}
+				>
 					<DeckHeader deckId={deckId} />
 				</Suspense>
 			</ErrorBoundary>
 
 			{/* Deck Stats */}
 			<ErrorBoundary>
-				<Suspense fallback={<LoadingSpinner />}>
+				<Suspense
+					fallback={
+						<div className="bg-white rounded-xl border border-border/50 p-6 mb-6">
+							<div className="grid grid-cols-2 gap-6">
+								<div>
+									<div className="h-4 w-20 bg-muted/20 rounded animate-pulse mb-1" />
+									<div className="h-8 w-12 bg-muted/20 rounded animate-pulse" />
+								</div>
+								<div>
+									<div className="h-4 w-20 bg-muted/20 rounded animate-pulse mb-1" />
+									<div className="h-8 w-12 bg-muted/20 rounded animate-pulse" />
+								</div>
+							</div>
+						</div>
+					}
+				>
 					<DeckStats deckId={deckId} />
 				</Suspense>
 			</ErrorBoundary>
-- 
cgit v1.3-1-g0d28