feat(ui): optimize image loading and enhance layout handling

- Refactor grid column calculation to use useMemo for performance
- Implement loading block during filter changes to prevent race conditions
- Add layout transition detection to manage loading behavior

Author: MarkusNeusinger

app/src/components/ImageCard.tsx

@@ -60,7 +60,6 @@ export const ImageCard = memo(function ImageCard({
 }: ImageCardProps) {
   const theme = useTheme();
   const isXs = useMediaQuery(theme.breakpoints.down('sm')); // < 600px
-  const isSm = useMediaQuery(theme.breakpoints.between('sm', 'md')); // 600-900px
 
   const labelFontSize = imageSize === 'compact' ? '0.65rem' : '0.8rem';
   const labelLetterSpacing = isXs ? '-0.03em' : 'normal';

app/src/components/ImagesGrid.tsx

@@ -50,9 +50,12 @@ export function ImagesGrid({
   void _onImageLoad; // Removed for performance - was causing re-renders per image load
 
   // Grid columns: normal = max 3 cols, compact = max 6 cols
-  const gridColumns = imageSize === 'compact'
-    ? { xs: 6, sm: 6, md: 3, lg: 3, xl: 2 }  // 2→2→4→4→6 cols
-    : { xs: 12, sm: 12, md: 6, lg: 6, xl: 4 }; // 1→1→2→2→3 cols
+  const gridColumns = useMemo(() =>
+    imageSize === 'compact'
+      ? { xs: 6, sm: 6, md: 3, lg: 3, xl: 2 }  // 2→2→4→4→6 cols
+      : { xs: 12, sm: 12, md: 6, lg: 6, xl: 4 }, // 1→1→2→2→3 cols
+    [imageSize]
+  );
 
   // Create O(1) lookup Maps from arrays
   const libraryMap = useMemo(() => {

app/src/hooks/useInfiniteScroll.ts

@@ -23,8 +23,31 @@ export function useInfiniteScroll({
   const stateRef = useRef({ allImages, displayedImages, hasMore });
   stateRef.current = { allImages, displayedImages, hasMore };
 
+  // Track document height to detect layout transitions
+  const lastDocHeightRef = useRef(0);
+  const layoutTransitionRef = useRef(false);
+  const loadBlockedRef = useRef(false);
+
+  // Block loading and reset tracking when data changes (new filter results)
+  useEffect(() => {
+    // Block loading to prevent race conditions during filter change
+    loadBlockedRef.current = true;
+    lastDocHeightRef.current = 0;
+    layoutTransitionRef.current = false;
+
+    // Unblock after state has settled
+    const timer = setTimeout(() => {
+      loadBlockedRef.current = false;
+    }, 150);
+
+    return () => clearTimeout(timer);
+  }, [allImages]);
+
   // Load more images
   const loadMore = useCallback(() => {
+    // Skip if loading is blocked (filter change in progress)
+    if (loadBlockedRef.current) return;
+
     const { allImages: all, displayedImages: displayed, hasMore: more } = stateRef.current;
     if (!more) return;
 
@@ -41,12 +64,29 @@ export function useInfiniteScroll({
 
   // Check if we need to load more based on scroll position
   const checkAndLoad = useCallback(() => {
+    // Skip if loading is blocked (filter change in progress)
+    if (loadBlockedRef.current) return;
+
     const { hasMore: more } = stateRef.current;
     if (!more) return;
 
     const scrollBottom = window.scrollY + window.innerHeight;
     const docHeight = document.documentElement.scrollHeight;
 
+    // Detect layout transitions (significant height changes)
+    const heightDiff = Math.abs(docHeight - lastDocHeightRef.current);
+    if (heightDiff > 500 && lastDocHeightRef.current > 0) {
+      // Layout is transitioning (e.g., compact/normal switch), pause loading
+      layoutTransitionRef.current = true;
+      setTimeout(() => {
+        layoutTransitionRef.current = false;
+      }, 300);
+    }
+    lastDocHeightRef.current = docHeight;
+
+    // Skip loading during layout transitions
+    if (layoutTransitionRef.current) return;
+
     // If within 2500px of bottom, load more
     if (scrollBottom + 2500 > docHeight) {
       loadMore();