Implement lazy loading for gallery images to prevent loading 400+ images simultaneously

[Copilot]

Problem

When viewing an album with many images (e.g., 400 photos), the gallery page would attempt to load all images simultaneously, causing:

• 400+ concurrent HTTP requests hitting the server at once
• Slow initial page load and poor performance
• Browser and network congestion
• Suboptimal user experience

Solution

Implemented lazy loading using the IntersectionObserver API to load images only when they enter or are near the viewport. This spreads out network requests over time as users scroll through the gallery.

Changes

1. New useInViewport Hook (src/hooks/useInViewport.ts)

Created a reusable React hook that leverages IntersectionObserver to detect when elements enter the viewport:

const [ref, isInView] = useInViewport<HTMLButtonElement>("200px");

• Uses 200px root margin to preload images before they're fully visible (smooth UX)
• Once an image loads, it stays loaded (no unloading on scroll away)

2. Enhanced ImageDisplay Component

Added an optional enabled prop that controls when React Query should fetch the image:

<ImageDisplay enabled={isInView} type="image" imageId={img} />

• Defaults to true for backward compatibility
• No breaking changes to existing usage throughout the codebase

3. Updated Album Page

Created a LazyImageCard wrapper component for gallery grid images:

• Shows a gray placeholder while images are out of view (no network request)
• Loads actual image when it enters viewport
• Image viewer modal still loads images immediately for smooth navigation

Results

Before: 400+ simultaneous requests when opening an album
After: Only ~10-20 initial requests, more load progressively as user scrolls

Performance Impact

• ✅ Dramatically reduced initial network load
• ✅ Faster page load times
• ✅ Progressive loading provides smooth user experience
• ✅ Better browser and server performance

Technical Details

• Uses native IntersectionObserver API (supported in all modern browsers)
• Maintains backward compatibility with existing ImageDisplay usage
• Properly implements React hooks with correct dependency management
• All linting checks pass

This implementation directly addresses the issue while maintaining minimal, surgical changes to the codebase.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Make the image gallery only load the images in view</issue_title>
<issue_description>Right now the image gallery loads all the images when going to an album. This is not great when there are 400 images to load since we then send 400 different requests to the server basically at once. It would be much better if only the images the user can see are loaded. Optionally it would also be nice if a heavily blurred extra small version of the image was initially loaded even when out of view, this requires a very small change to the server (ask spindelförmannen!). You can take some inspiration from https://nextjsconf-pics.vercel.app/.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #155

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.