Fix: correct import placement in ThumbnailImage.tsx to prevent blank spaces during thumbnail loading

frontend/src/components/ThumbnailImage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import api from '@/lib/api';
 
 interface ThumbnailImageProps {
@@ -11,7 +11,13 @@ interface ThumbnailImageProps {
 export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken, docType }: ThumbnailImageProps) {
   const [errorCount, setErrorCount] = useState(0);
   const [key, setKey] = useState(0);
-  const [showFallback, setShowFallback] = useState(false);
+  const [showFallback, setShowFallback] = useState(true);
+
+  // Reset state if checksum changes
+  useEffect(() => {
+    setShowFallback(true);
+    setErrorCount(0);
+  }, [checksum]);
 
   const docStyle = docType === 'docs' 
     ? 'h-[85%] max-w-[85%] aspect-[1/1.4] bg-white border border-gray-300 dark:border-gray-600 shadow-md' 
@@ -30,17 +36,13 @@ export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken,
       style={{ display: showFallback ? 'none' : 'block' }}
       onError={(e) => {
         if (errorCount < 20) {
-          e.currentTarget.style.display = 'none';
           setTimeout(() => {
             setErrorCount(c => c + 1);
             setKey(Date.now());
           }, 2000);
-        } else {
-          setShowFallback(true);
         }
       }}
       onLoad={(e) => {
-        e.currentTarget.style.display = 'block';
         setShowFallback(false);
       }}
     />