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/StudyPage.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

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

diff --git a/src/client/pages/StudyPage.tsx b/src/client/pages/StudyPage.tsx
index 9c79752..423fdd0 100644
--- a/src/client/pages/StudyPage.tsx
+++ b/src/client/pages/StudyPage.tsx
@@ -17,7 +17,6 @@ import { Link, useParams } from "wouter";
 import { ApiClientError, apiClient } from "../api";
 import { studyDataAtomFamily } from "../atoms";
 import { ErrorBoundary } from "../components/ErrorBoundary";
-import { LoadingSpinner } from "../components/LoadingSpinner";
 import { renderCard } from "../utils/templateRenderer";
 
 type Rating = 1 | 2 | 3 | 4;
@@ -373,7 +372,19 @@ export function StudyPage() {
 			{/* Main Content */}
 			<main className="flex-1 flex flex-col max-w-2xl mx-auto w-full px-4 py-6">
 				<ErrorBoundary>
-					<Suspense fallback={<LoadingSpinner className="flex-1" />}>
+					<Suspense
+						fallback={
+							<div className="flex-1 flex flex-col">
+								<div className="flex items-center justify-between mb-6">
+									<div className="h-7 w-36 bg-muted/20 rounded animate-pulse" />
+									<div className="h-7 w-24 bg-muted/20 rounded-full animate-pulse" />
+								</div>
+								<div className="flex-1 min-h-[280px] bg-white rounded-2xl border border-border/50 shadow-card p-8 flex items-center justify-center">
+									<div className="h-7 w-48 bg-muted/20 rounded animate-pulse" />
+								</div>
+							</div>
+						}
+					>
 						<StudySession deckId={deckId} />
 					</Suspense>
 				</ErrorBoundary>
-- 
cgit v1.3-1-g0d28