Fix react raching preventing load of thumbnails

frontend/src/components/ThumbnailImage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import api from '@/lib/api';
 
 interface ThumbnailImageProps {
@@ -23,8 +23,18 @@ export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken,
     ? 'w-full h-full rounded-md overflow-hidden bg-white'
     : 'w-full h-full';
 
+  const imgRef = React.useRef<HTMLImageElement>(null);
+
+  // Check if image is already cached and loaded
+  useEffect(() => {
+    if (imgRef.current && imgRef.current.complete && imgRef.current.naturalWidth > 0) {
+      setShowFallback(false);
+    }
+  }, [checksum, downloadToken, key]);
+
   const imgElement = (
     <img
+      ref={imgRef}
       key={key}
       src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''}
       alt=""