CodingNic

Build the Library

Connect Library UI States

Build the Library 15 min read

Connect Library UI States

Connect Library UI States

Task

Finish the Library experience around real asynchronous data.

Handle:

text
loading → loaded → empty → error

Keep the prepared grid/list layouts and controls.

For an error:

ts
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.