diff options
| author | nsfisis <nsfisis@gmail.com> | 2026-02-04 22:15:54 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2026-02-04 22:42:12 +0900 |
| commit | 0d42e351b318302098c585dc5d9730cc741ae8d3 (patch) | |
| tree | aed005eab156f48da562ed327b59050e68fc4122 /src/client/pages/StudyPage.tsx | |
| parent | fc208d960e137dd36590908145a13d8501144b7a (diff) | |
| download | kioku-0d42e351b318302098c585dc5d9730cc741ae8d3.tar.gz kioku-0d42e351b318302098c585dc5d9730cc741ae8d3.tar.zst kioku-0d42e351b318302098c585dc5d9730cc741ae8d3.zip | |
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>
Diffstat (limited to 'src/client/pages/StudyPage.tsx')
| -rw-r--r-- | src/client/pages/StudyPage.tsx | 15 |
1 files changed, 13 insertions, 2 deletions
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> |