From 3d6346197686110bed85b7cdef61ce6fda61032e Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Mon, 15 Jun 2026 18:36:46 -0700
Subject: [PATCH] Fix react raching preventing load of thumbnails

---
 frontend/src/components/ThumbnailImage.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ThumbnailImage.tsx b/frontend/src/components/ThumbnailImage.tsx
index 81f6282..72ff128 100644
--- a/frontend/src/components/ThumbnailImage.tsx
+++ b/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=""