feat(performance): optimize image loading and data fetching

- Change image loading strategy to 'eager' for initial batch
- Load shared data after browser is idle to prioritize bandwidth
- Preload additional font for Latin-1 Supplement characters

Author: MarkusNeusinger

app/index.html

@@ -28,6 +28,8 @@
 
     <!-- Preload MonoLisa Basic Latin (most used, variable font = all weights) -->
     <link rel="preload" href="https://storage.googleapis.com/pyplots-static/fonts/0-MonoLisa-normal.woff2" as="font" type="font/woff2" crossorigin>
+    <!-- Preload Latin-1 Supplement for ä, ö, ü, ß etc. -->
+    <link rel="preload" href="https://storage.googleapis.com/pyplots-static/fonts/2-MonoLisa-normal.woff2" as="font" type="font/woff2" crossorigin>
 
     <!-- JSON-LD Structured Data -->
     <script type="application/ld+json">

app/src/components/ImageCard.tsx

@@ -149,7 +149,7 @@ export const ImageCard = memo(function ImageCard({
       >
         <CardMedia
           component="img"
-          loading="lazy"
+          loading={index < BATCH_SIZE ? 'eager' : 'lazy'}
           image={image.thumb || image.url}
           alt={viewMode === 'library' ? `${image.spec_id} - ${image.library}` : `${selectedSpec} - ${image.library}`}
           sx={{

app/src/components/Layout.tsx

@@ -34,9 +34,9 @@ export function AppDataProvider({ children }: { children: ReactNode }) {
     setHomeState((prev) => ({ ...prev, scrollY: window.scrollY }));
   }, []);
 
-  // Load shared data on mount
+  // Load shared data after browser is idle — gives /plots/filter bandwidth priority
   useEffect(() => {
-    const fetchData = async () => {
+    const id = requestIdleCallback(async () => {
       try {
         const [specsRes, libsRes, statsRes] = await Promise.all([
           fetch(`${API_URL}/specs`),
@@ -61,8 +61,8 @@ export function AppDataProvider({ children }: { children: ReactNode }) {
       } catch (err) {
         console.error('Error loading initial data:', err);
       }
-    };
-    fetchData();
+    });
+    return () => cancelIdleCallback(id);
   }, []);
 
   return (