feat: implement caching for cryptographic keys to improve performance and reduce overhead

webapp/src/components/vault/vault-page-helpers.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import {
   CreditCard,
   FileKey2,
@@ -436,44 +436,85 @@ export function firstPasskeyCreationTime(cipher: Cipher | null): string | null {
 }
 
 const failedIconHosts = new Set<string>();
+const ICON_LOAD_ROOT_MARGIN = '180px 0px';
 
 export function VaultListIcon({ cipher }: { cipher: Cipher }) {
   const host = useMemo(() => hostFromUri(firstCipherUri(cipher)), [cipher]);
+  const iconStackRef = useRef<HTMLSpanElement | null>(null);
   const [errored, setErrored] = useState(() => (host ? failedIconHosts.has(host) : false));
-  const [loaded, setLoaded] = useState(false);
+  const [shouldLoad, setShouldLoad] = useState(() => !host);
   const markIconError = () => {
     if (host) failedIconHosts.add(host);
     setErrored(true);
   };
-  const syncCachedIconState = (img: HTMLImageElement | null) => {
-    if (!img || !img.complete) return;
-    if (img.naturalWidth > 0) {
-      setLoaded(true);
-      return;
+  const hideFallback = () => {
+    const stack = iconStackRef.current;
+    if (stack) {
+      const fallback = stack.querySelector('.list-icon-fallback') as HTMLElement | null;
+      if (fallback) fallback.style.display = 'none';
     }
-    markIconError();
   };
+  const handleImgRef = (img: HTMLImageElement | null) => {
+    if (!img || !img.complete) return;
+    if (img.naturalWidth > 0) hideFallback();
+  };
+
   useEffect(() => {
     setErrored(host ? failedIconHosts.has(host) : false);
-    setLoaded(false);
+    setShouldLoad(!host);
+    // Reset fallback visibility so it shows while loading the new icon
+    const fallback = iconStackRef.current?.querySelector('.list-icon-fallback') as HTMLElement | null;
+    if (fallback) fallback.style.display = '';
   }, [host]);
 
+  useEffect(() => {
+    if (!host || errored || shouldLoad) return;
+    const node = iconStackRef.current;
+    if (!node) return;
+    if (typeof IntersectionObserver !== 'function') {
+      setShouldLoad(true);
+      return;
+    }
+
+    let cancelled = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting && entry.intersectionRatio <= 0) continue;
+          if (!cancelled) setShouldLoad(true);
+          observer.disconnect();
+          break;
+        }
+      },
+      { rootMargin: ICON_LOAD_ROOT_MARGIN }
+    );
+
+    observer.observe(node);
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+    };
+  }, [host, errored, shouldLoad]);
+
   if (host && !errored) {
     return (
-      <span className="list-icon-stack">
-        <span className={`list-icon-fallback ${loaded ? 'hidden' : ''}`}>
+      <span className="list-icon-stack" ref={iconStackRef}>
+        <span className="list-icon-fallback">
           <Globe size={18} />
         </span>
-        <img
-          className={`list-icon ${loaded ? 'loaded' : ''}`}
-          src={websiteIconUrl(host)}
-          alt=""
-          loading="lazy"
-          referrerPolicy="no-referrer"
-          ref={syncCachedIconState}
-          onLoad={() => setLoaded(true)}
-          onError={markIconError}
-        />
+        {shouldLoad && (
+          <img
+            className="list-icon loaded"
+            src={websiteIconUrl(host)}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            referrerPolicy="no-referrer"
+            ref={handleImgRef}
+            onLoad={hideFallback}
+            onError={markIconError}
+          />
+        )}
       </span>
     );
   }