fix(admin): lazy-load Media Library thumbnails

Media Library page fetched 100 items on first load and rendered every
thumbnail eagerly, firing ~100 concurrent resize requests through the
Astro image endpoint on mount. Adds loading="lazy" to all thumbnail
<img> tags and trims the initial page size to 40.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: marcusbellamyshaw-cell

.changeset/media-library-lazy-thumbnails.md

@@ -0,0 +1,5 @@
+---
+"emdash": patch
+---
+
+Fixes slow load and scroll on the Media Library admin page. Thumbnails now use native `loading="lazy"` so the browser only fetches images as they scroll into view, instead of firing every visible page's worth of resize requests on mount. The initial page size is also reduced from 100 to 40 items.

packages/admin/src/components/MediaLibrary.tsx

@@ -585,6 +585,7 @@ function MediaGridItem({ item, selected, onClick }: MediaGridItemProps) {
 					<img
 						src={getMediaThumbnailUrl(item.url, item.mimeType, MEDIA_THUMBNAIL_WIDTH)}
 						alt={item.alt || item.filename}
+						loading="lazy"
 						className="h-full w-full object-cover"
 						onError={(e) => fallbackToOriginalThumbnail(e.currentTarget, item.url)}
 					/>
@@ -636,6 +637,7 @@ function ProviderGridItem({ item, selected, onClick, onDimensionsLoaded }: Provi
 					<img
 						src={item.previewUrl}
 						alt={item.alt || item.filename}
+						loading="lazy"
 						className="h-full w-full object-cover"
 						onLoad={handleImageLoad}
 					/>
@@ -679,6 +681,7 @@ function MediaListItem({ item, selected, onClick }: MediaListItemProps) {
 						<img
 							src={getMediaThumbnailUrl(item.url, item.mimeType, 80)}
 							alt={item.alt || item.filename}
+							loading="lazy"
 							className="h-full w-full object-cover"
 							onError={(e) => fallbackToOriginalThumbnail(e.currentTarget, item.url)}
 						/>
@@ -734,6 +737,7 @@ function ProviderListItem({ item, selected, onClick, onDimensionsLoaded }: Provi
 						<img
 							src={item.previewUrl}
 							alt={item.alt || item.filename}
+							loading="lazy"
 							className="h-full w-full object-cover"
 							onLoad={handleImageLoad}
 						/>

packages/admin/src/router.tsx

@@ -1116,7 +1116,7 @@ function MediaPage() {
 			queryFn: ({ pageParam }) =>
 				fetchMediaList({
 					cursor: pageParam,
-					limit: 100,
+					limit: 40,
 					search: search || undefined,
 					mimeType: mimeFilter,
 				}),

packages/admin/tests/components/MediaLibrary.test.tsx

@@ -90,6 +90,14 @@ describe("MediaLibrary", () => {
 			await expect.element(img).toBeInTheDocument();
 			await expect.element(img).toHaveAttribute("src", "https://example.com/photo.jpg");
 		});
+
+		it("grid thumbnails are natively lazy-loaded", async () => {
+			// A library page can hold up to 100 items; without `loading="lazy"` the
+			// browser fetches every thumbnail on mount instead of only the visible ones.
+			const items = [makeMediaItem({ id: "1", filename: "pic.jpg", mimeType: "image/jpeg" })];
+			const screen = await renderLibrary({ items });
+			await expect.element(screen.getByAltText("pic.jpg")).toHaveAttribute("loading", "lazy");
+		});
 	});
 
 	describe("view mode toggle", () => {
@@ -174,6 +182,13 @@ describe("MediaLibrary", () => {
 			await expect.element(screen.getByText("application/pdf")).toBeInTheDocument();
 			await expect.element(screen.getByText("1 MB")).toBeInTheDocument();
 		});
+
+		it("list view thumbnails are natively lazy-loaded", async () => {
+			const items = [makeMediaItem({ id: "1", filename: "pic.jpg", mimeType: "image/jpeg" })];
+			const screen = await renderLibrary({ items });
+			await screen.getByRole("button", { name: "List view" }).click();
+			await expect.element(screen.getByAltText("pic.jpg")).toHaveAttribute("loading", "lazy");
+		});
 	});
 
 	describe("header", () => {