+ );
+}
diff --git a/client/src/components/BookGrid/BookGrid.tsx b/client/src/components/BookGrid/BookGrid.tsx
index 91d1b6f..e2c5040 100644
--- a/client/src/components/BookGrid/BookGrid.tsx
+++ b/client/src/components/BookGrid/BookGrid.tsx
@@ -1,38 +1,48 @@
import { BookCard } from '../BookCard/BookCard';
import type { Book } from '../../types/book';
import styles from './BookGrid.module.css';
+import type { ShelfEntry } from '../../data/mockBooks';
+import { BookCardSkeleton } from '../BookCardSkeleton/BookCardSkeleton';
-/* ---------- Props: what a page must provide ---------- */
+// ===== How many placeholders to show while loading =====
+const SKELETON_COUNT = 8;
+
+// ===== Props =====
type BookGridProps = {
books: Book[];
- savedIds: Set; // which books are on My shelf
- ratings: Record; // bookId → the user's own rating (missing = unrated)
+ shelf: Map; // bookId → shelf entry (rating, note), present = on My shelf
onToggleSaved: (bookId: string) => void;
- showShelfPlank?: boolean; // decorative shelf plank under each row; off on Browse, on for My shelf
+ showShelfPlank?: boolean;
+ isLoading?: boolean;
};
/* ---------- BookGrid: one list, one card per book ---------- */
// Doesn't know which page it's on. The page decides which books to pass and whether to show the shelf plank.
export function BookGrid({
books,
- savedIds,
- ratings,
+ shelf,
onToggleSaved,
showShelfPlank = false,
+ isLoading = false,
}: BookGridProps) {
return (
// The modifier class holds the CSS that only the shelf needs (clipping)
- {books.map((book) => (
- onToggleSaved(book.id)} // the grid binds the id, so a card doesn't need to know it
- showShelfPlank={showShelfPlank}
- />
- ))}
+ {isLoading
+ ? Array.from({ length: SKELETON_COUNT }, (_, i) => )
+ : books.map((book) => {
+ const entry = shelf.get(book.id);
+ return (
+ onToggleSaved(book.id)}
+ showShelfPlank={showShelfPlank}
+ />
+ );
+ })}