u

src/components/article/ThumbHashImage.jsx

@@ -1,6 +1,48 @@
 import { useEffect, useRef } from 'react';
 import Box from '@mui/material/Box';
-import { thumbHashToRGBA } from 'thumbhash';
+import { thumbHashToRGBA, thumbHashToDataURL } from 'thumbhash';
+
+const dataUrlCache = (globalThis.__THUMB_DATA_URL_CACHE__ ??= new Map());
+const loadedImageHashes = (globalThis.__LOADED_IMAGE_HASHES__ ??= new Set());
+export const imageCache = (globalThis.__IMAGE_CACHE__ ??= new Map());
+
+export function isImageLoaded(fullHash) {
+  if (!fullHash) return false;
+  return loadedImageHashes.has(fullHash) || imageCache.has(fullHash);
+}
+
+export function markImageLoaded(fullHash, img) {
+  if (!fullHash) return;
+  loadedImageHashes.add(fullHash);
+  if (img) {
+    imageCache.set(fullHash, img);
+  }
+}
+
+export function getCachedImage(fullHash) {
+  if (!fullHash) return null;
+  const img = imageCache.get(fullHash);
+  if (img && img.complete && img.naturalWidth) {
+    return img;
+  }
+  return null;
+}
+
+export function getThumbHashDataUrl(thumbHash) {
+  if (!thumbHash || typeof thumbHash !== 'string') return null;
+  let url = dataUrlCache.get(thumbHash);
+  if (!url) {
+    try {
+      const bytes = Uint8Array.from(atob(thumbHash), (c) => c.charCodeAt(0));
+      url = thumbHashToDataURL(bytes);
+      dataUrlCache.set(thumbHash, url);
+    } catch (err) {
+      console.warn('[ThumbHashImage] thumbHashToDataURL failed:', err);
+      return null;
+    }
+  }
+  return url;
+}
 
 export function decodeThumbHash(thumbHash) {
   if (!thumbHash || typeof thumbHash !== 'string') return null;