feat: enhance website icon loading mechanism; implement icon loading state management and error handling

webapp/src/components/vault/WebsiteIcon.tsx

@@ -3,9 +3,11 @@ import type { ComponentChildren } from 'preact';
 import { Globe } from 'lucide-preact';
 import type { Cipher } from '@/lib/types';
 import {
+  beginWebsiteIconLoad,
   getWebsiteIconImageUrl,
   getWebsiteIconStatus,
-  preloadWebsiteIcon,
+  markWebsiteIconErrored,
+  markWebsiteIconLoaded,
   subscribeWebsiteIconStatus,
 } from '@/lib/website-icon-cache';
 import { demoBrandIconUrl } from '@/lib/demo-brand-icons';
@@ -26,6 +28,7 @@ export default function WebsiteIcon(props: WebsiteIconProps) {
   const [shouldLoad, setShouldLoad] = useState(() => (host ? getWebsiteIconStatus(host) === 'loaded' : true));
   const [status, setStatus] = useState(() => (host ? getWebsiteIconStatus(host) : 'idle'));
   const [imageUrl, setImageUrl] = useState(() => (host ? getWebsiteIconImageUrl(host) : ''));
+  const [isLoadOwner, setIsLoadOwner] = useState(false);
   const demoIconUrl = SHOULD_LOAD_DEMO_BRAND_ICONS && host ? demoBrandIconUrl(host) : '';
 
   useEffect(() => {
@@ -33,12 +36,14 @@ export default function WebsiteIcon(props: WebsiteIconProps) {
       setShouldLoad(true);
       setStatus('idle');
       setImageUrl('');
+      setIsLoadOwner(false);
       return;
     }
     const nextStatus = getWebsiteIconStatus(host);
     setShouldLoad(nextStatus === 'loaded');
     setStatus(nextStatus);
     setImageUrl(getWebsiteIconImageUrl(host));
+    setIsLoadOwner(false);
     return subscribeWebsiteIconStatus(host, (next) => {
       setStatus(next);
       setImageUrl(getWebsiteIconImageUrl(host));
@@ -77,16 +82,8 @@ export default function WebsiteIcon(props: WebsiteIconProps) {
   useEffect(() => {
     if (SHOULD_LOAD_DEMO_BRAND_ICONS) return;
     if (demoIconUrl) return;
-    if (!host || !src || !shouldLoad || status === 'loaded' || status === 'error') return;
-    let disposed = false;
-    void preloadWebsiteIcon(host, src).then((nextStatus) => {
-      if (disposed) return;
-      setStatus(nextStatus);
-      setImageUrl(getWebsiteIconImageUrl(host));
-    });
-    return () => {
-      disposed = true;
-    };
+    if (!host || !src || !shouldLoad || status !== 'idle') return;
+    setIsLoadOwner(beginWebsiteIconLoad(host, src));
   }, [demoIconUrl, host, src, shouldLoad, status]);
 
   if (demoIconUrl) {
@@ -107,16 +104,20 @@ export default function WebsiteIcon(props: WebsiteIconProps) {
     return <span className="list-icon-fallback">{props.fallback ?? <Globe size={18} />}</span>;
   }
 
+  const shouldRenderIconImage = !!imageUrl && (status === 'loaded' || (status === 'loading' && isLoadOwner));
+
   return (
     <span className="list-icon-stack" ref={nodeRef}>
       {status !== 'loaded' && <span className="list-icon-fallback">{props.fallback ?? <Globe size={18} />}</span>}
-      {status === 'loaded' && imageUrl && (
+      {shouldRenderIconImage && (
         <img
-          className="list-icon loaded"
+          className={`list-icon${status === 'loaded' ? ' loaded' : ''}`}
           src={imageUrl}
           alt=""
           loading="lazy"
           decoding="async"
+          onLoad={() => markWebsiteIconLoaded(host, imageUrl)}
+          onError={() => markWebsiteIconErrored(host)}
         />
       )}
     </span>

webapp/src/lib/website-icon-cache.ts

@@ -1,10 +1,7 @@
 type WebsiteIconStatus = 'idle' | 'loading' | 'loaded' | 'error';
 
-const ICON_LOAD_TIMEOUT_MS = 5000;
-
 interface WebsiteIconRecord {
   status: WebsiteIconStatus;
-  promise: Promise<WebsiteIconStatus> | null;
   imageUrl: string | null;
   listeners: Set<(status: WebsiteIconStatus) => void>;
 }
@@ -16,7 +13,6 @@ function ensureRecord(host: string): WebsiteIconRecord {
   if (!record) {
     record = {
       status: 'idle',
-      promise: null,
       imageUrl: null,
       listeners: new Set(),
     };
@@ -55,7 +51,6 @@ export function subscribeWebsiteIconStatus(host: string, listener: (status: Webs
 export function markWebsiteIconLoaded(host: string, imageUrl?: string): void {
   if (!host) return;
   const record = ensureRecord(host);
-  record.promise = null;
   if (imageUrl) {
     record.imageUrl = imageUrl;
   }
@@ -65,56 +60,15 @@ export function markWebsiteIconLoaded(host: string, imageUrl?: string): void {
 export function markWebsiteIconErrored(host: string): void {
   if (!host) return;
   const record = ensureRecord(host);
-  record.promise = null;
   record.imageUrl = null;
   notifyRecord(host, 'error');
 }
 
-function blobToDataUrl(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '');
-    reader.onerror = () => reject(reader.error || new Error('Failed to read icon'));
-    reader.readAsDataURL(blob);
-  });
-}
-
-export function preloadWebsiteIcon(host: string, src: string): Promise<WebsiteIconStatus> {
-  if (!host) return Promise.resolve('error');
-
+export function beginWebsiteIconLoad(host: string, src: string): boolean {
+  if (!host || !src) return false;
   const record = ensureRecord(host);
-  if (record.status === 'loaded' || record.status === 'error') {
-    return Promise.resolve(record.status);
-  }
-  if (record.promise) {
-    return record.promise;
-  }
-
+  if (record.status !== 'idle') return false;
+  record.imageUrl = src;
   notifyRecord(host, 'loading');
-  record.promise = (async () => {
-    const controller = new AbortController();
-    const timeout = window.setTimeout(() => controller.abort(), ICON_LOAD_TIMEOUT_MS);
-    try {
-      const resp = await fetch(src, {
-        cache: 'force-cache',
-        signal: controller.signal,
-      });
-      if (!resp.ok) throw new Error('Icon unavailable');
-      const contentType = String(resp.headers.get('Content-Type') || '').toLowerCase();
-      if (!contentType.startsWith('image/')) throw new Error('Icon response is not an image');
-      const blob = await resp.blob();
-      if (!blob.size) throw new Error('Icon response is empty');
-      const imageUrl = await blobToDataUrl(blob);
-      if (!imageUrl) throw new Error('Icon response is empty');
-      markWebsiteIconLoaded(host, imageUrl);
-      return 'loaded';
-    } catch {
-      markWebsiteIconErrored(host);
-      return 'error';
-    } finally {
-      window.clearTimeout(timeout);
-    }
-  })();
-
-  return record.promise;
+  return true;
 }