Feature Request: Build Book List UI with Empty-State and Loading

[debugfest]

The app currently lacks a proper interface for viewing books. We need a Book List component that displays books in a clean grid or list layout. The UI should handle all states — loading, populated, and empty — for a complete user experience.

🎯 Proposed Solution

• Create BookList.tsx in App/src/components/.
• Fetch books from /api/books using Axios or Fetch API.
• Implement three UI states:
  • Loading: show skeleton or spinner.
  • Empty: show a message and a CTA button (“Add your first book”).
  • Loaded: display grid of book cards (title, author, year, status).

✅ Expected Behavior

• Book list renders accurately once data is fetched.
• Empty state displays a friendly message and “Add Book” button.
• Loading spinner appears while fetching data.

💻 Technical Notes

• Use React state (useState, useEffect) for API handling.
• Utilize Tailwind grid utilities for responsive layout.
• Consider reusable BookCard component for each book entry.

🧪 Test Steps

1. Load /books route.
2. Observe the spinner during loading.
3. Check empty state if no data.
4. Add a book and verify it appears in the list.