Build the Library
15 min read
Connect Library UI States
Connect Library UI States
Task
Finish the Library experience around real asynchronous data.
Handle:
loading → loaded → empty → error
Keep the prepared grid/list layouts and controls.
For an error:
if (error) {
return (
<LibraryErrorState
message="We couldn't load your library."
onRetry={loadBooks}
/>
);
}
When a mutation is running, disable the relevant action so a user cannot submit it repeatedly.
After create, edit, or delete, update the visible list without requiring a full page navigation.
Test
Verify:
- loading state appears during a delayed request
- empty state appears for a new account
- an API failure produces an error state
- retry loads the Library
- create/edit/delete update the UI
Checkpoint
My Library is now a complete authenticated CRUD surface with real data, search, filters, sorting, and predictable UI states.
Module Complete
The core Library is real. Next, we connect EPUB files to object storage and give each Book a real uploaded file.