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/DeckDetailPage.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/DeckDetailPage.tsx')
| -rw-r--r-- | src/client/pages/DeckDetailPage.tsx | 26 |
1 files changed, 24 insertions, 2 deletions
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> |