External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: hold gif thumbnails until first frame is ready

Browse Source 
Distinguish GIF frame loading from GIF frame failure in useFetchGifFirstFrame(), so thread and catalog thumbnails no longer render animated GIFs before the still frame arrives. Keep the existing animated fallback when the first-frame fetch actually fails.
This commit is contained in:
plebeius
2026-03-07 21:16:13 +08:00
parent b064cf0511
commit 34e2c2bc4d
7 changed files with 108 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/catalog-row/catalog-row.tsx
+4 -2
View File
@@ -35,7 +35,7 @@ interface CatalogPostMediaProps {
export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight }: CatalogPostMediaProps) => {
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
const iframeThumbnail = patternThumbnailUrl || thumbnail;
const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
const { frameUrl: gifFrameUrl, status: gifFrameStatus } = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
const [isLoaded, setIsLoaded] = useState(false);
const [hasError, setHasError] = useState(false);
const handleLoad = () => setIsLoaded(true);
@@ -76,8 +76,10 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight
let thumbnailComponent: React.ReactNode = null;
if (type === 'gif' && gifFrameUrl && !hasError) {
if (type === 'gif' && gifFrameStatus === 'ready' && gifFrameUrl && !hasError) {
thumbnailComponent = <img src={gifFrameUrl} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
} else if (type === 'gif' && gifFrameStatus === 'failed' && !hasError) {
thumbnailComponent = <img src={url} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
} else if (type === 'image' && !hasError) {
thumbnailComponent = <img src={url} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
} else if (type === 'video' && !hasError) {