feat: enhance icon error handling and loading state management in TotpCodesPage and VaultListIcon components

webapp/src/components/TotpCodesPage.tsx

@@ -74,6 +74,18 @@ function TotpListIcon({ cipher }: { cipher: Cipher }) {
   const host = hostFromUri(uri);
   const [errored, setErrored] = useState(() => (host ? failedIconHosts.has(host) : false));
   const [loaded, setLoaded] = useState(false);
+  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;
+    }
+    markIconError();
+  };
   useEffect(() => {
     setErrored(host ? failedIconHosts.has(host) : false);
     setLoaded(false);
@@ -91,11 +103,9 @@ function TotpListIcon({ cipher }: { cipher: Cipher }) {
           alt=""
           loading="lazy"
           referrerPolicy="no-referrer"
+          ref={syncCachedIconState}
           onLoad={() => setLoaded(true)}
-          onError={() => {
-            failedIconHosts.add(host);
-            setErrored(true);
-          }}
+          onError={markIconError}
         />
       </span>
     );