Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix react raching preventing load of thumbnails
All checks were successful
Automated Container Build / build-and-push (push) Successful in 29s
Details

Browse source
This commit is contained in:
Elijah 2026-06-15 18:36:46 -07:00
parent 83e73b4d52
commit 3d63461976
1 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/ThumbnailImage.tsx
View file

@ -1,4 +1,4 @@
import { useState, useEffect } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import api from '@/lib/api'; import api from '@/lib/api';
interface ThumbnailImageProps { 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 rounded-md overflow-hidden bg-white'
: 'w-full h-full'; : '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 = ( const imgElement = (
<img <img
ref={imgRef}
key={key} key={key}
src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''} src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''}
alt="" alt=""