Add feedback states: skeleton loading, error and empty #57
+288
−54
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
New: - `BookCardSkeleton.tsx` - `BookCardSkeleton.module.css` Modified: - `BookCard.module.css`: add comment to inform that the skeleton uses and is dependent on that file to keep the format identical between real and skeleton book cards - `BookGrid.tsx` now handles the actual rendering of skeleton books, takes isLoading as a prop from the page who calls it. The props `savedIds` and `ratings` were replaced by `shelf` to reflect current data shape. - `BrowsePage.tsx` now uses BookGrid to render results, where before it did this itself using BookCard. TEMPORARY: hardcoded `isLoading` to ensure that BookGrid is called on correctly. Must be swapped for real loading logic. - `BrowsePage.module.css`: remove .grid rules since this page no longer does this itself.
New: - `LoadingState.tsx` and `.module.css`: a role="status" wrapper with a visually hidden label, plus one pulsing dot to show loading state. Uses `announceOnly` to allow different visual loading (skeleton book cards) but retain the screen reader message. Modified: - `BrowsePage.tsx` updated with the new `<LoadingState announceOnly />` - `BookDetailPage.tsx` updated with the pulsing dot + label. Note: Both of these use a temporary, hardcoded "isLoading" that has to be replaced with real loading logic.
primary -> default secondary -> emphasis Need these for further work on this branch. Kept bumping into misunderstandings of which one was the filled, brightly colored one, and which one was the quiet, outlined one. Should make more sense now.
New:
- `ErrorState.tsx` and `.module.css`: role="alert" message with a "Try again" button that calls `onRetry`. `headingLevel` (1 | 2) lets it be the page's h1 when it replaces the whole page.
- `EmptyState.tsx` and `.module.css`: title, message and optional `action` button. Same `headingLevel` prop.
Modified:
- `BookDetailPage.tsx`: shows `ErrorState` on a failed query and `EmptyState` ("Book not found", back to browse) when the id doesn't exist. Loading is checked first, then error, then not found, so a loading or failed query is never mistaken for a missing book.
Note: `isError` is a temporary, hardcoded flag, and `onRetry` is a temporary console.log. Both must be replaced with the real query's `error` and `refetch`. "Back to browse" assumes Browse is at `/`.
Closed
ronnenga
approved these changes
Oct 9, 2026
Sign in
to join this conversation on GitHub.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #36
What
BookCardSkeleton: placeholder in the shape of a BookCard, shown while a list loadsLoadingState: screen reader announcement (announceOnly) plus a pulsing dot for pages without a skeletonErrorState: message and "Try again" buttonEmptyState: title, message and optional action buttonBookGridnow renders skeletons viaisLoading, and takes a singleshelfmap instead ofsavedIds+ratingsBrowsePagenow usesBookGridinstead of its own grid (this also ensures skeleton and card widths are matching)BookDetailPagehandles loading, error and book-not-foundButtonvariants renamed:primary→default,secondary→emphasisTemporary, to replace when queries are connected
isLoadinginBrowsePageandBookDetailPage, andisErrorinBookDetailPageonRetryis aconsole.log, should be the query'srefetchHow to test
/book/nonsenseto see the empty statetrueto see loading and error (in a page file)prefers-reduced-motion: reduceand check that the loading state pulse stopsFor review
BrowsePage.tsxis touched: it now renders throughBookGrid, and its duplicate.gridCSS is removed. Please pull before continuing work on search/filter/sort there.Screenshots