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

Fix: correct import placement in ThumbnailImage.tsx to prevent blank spaces during thumbnail loading
Some checks failed
Automated Container Build / build-and-push (push) Has been cancelled
Details

Browse source
This commit is contained in:
Elijah 2026-05-25 19:26:22 -07:00
parent ae6c97b9de
commit 84b30132f4
2 changed files with 9 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useState } from 'react'; import { useState, useEffect } from 'react';
import api from '@/lib/api'; import api from '@/lib/api';
interface ThumbnailImageProps { interface ThumbnailImageProps {
@ -11,7 +11,13 @@ interface ThumbnailImageProps {
export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken, docType }: ThumbnailImageProps) { export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken, docType }: ThumbnailImageProps) {
const [errorCount, setErrorCount] = useState(0); const [errorCount, setErrorCount] = useState(0);
const [key, setKey] = 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' 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' ? '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' }} style={{ display: showFallback ? 'none' : 'block' }}
onError={(e) => { onError={(e) => {
if (errorCount < 20) { if (errorCount < 20) {
e.currentTarget.style.display = 'none';
setTimeout(() => { setTimeout(() => {
setErrorCount(c => c + 1); setErrorCount(c => c + 1);
setKey(Date.now()); setKey(Date.now());
}, 2000); }, 2000);
} else {
setShowFallback(true);
} }
}} }}
onLoad={(e) => { onLoad={(e) => {
e.currentTarget.style.display = 'block';
setShowFallback(false); setShowFallback(false);
}} }}
/> />

2
frontend/tsconfig.tsbuildinfo
View file

File diff suppressed because one or more lines are too long