Add isolated Pages demo mode with sample vault data

webapp/src/components/vault/WebsiteIcon.tsx

@@ -11,6 +11,7 @@ import {
 import { firstCipherUri, hostFromUri, websiteIconUrl } from '@/lib/website-utils';
 
 const ICON_LOAD_ROOT_MARGIN = '180px 0px';
+const SHOULD_LOAD_DEMO_BRAND_ICONS = __NODEWARDEN_DEMO__;
 
 interface WebsiteIconProps {
   cipher: Cipher;
@@ -24,6 +25,21 @@ 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 [demoIconUrl, setDemoIconUrl] = useState('');
+
+  useEffect(() => {
+    if (!SHOULD_LOAD_DEMO_BRAND_ICONS || !host) {
+      setDemoIconUrl('');
+      return;
+    }
+    let disposed = false;
+    void import('@/lib/demo-brand-icons').then(({ demoBrandIconUrl }) => {
+      if (!disposed) setDemoIconUrl(demoBrandIconUrl(host));
+    });
+    return () => {
+      disposed = true;
+    };
+  }, [host]);
 
   useEffect(() => {
     if (!host) {
@@ -72,6 +88,7 @@ export default function WebsiteIcon(props: WebsiteIconProps) {
   }, [host, shouldLoad, status]);
 
   useEffect(() => {
+    if (demoIconUrl) return;
     if (!host || !src || !shouldLoad || status === 'loaded' || status === 'error') return;
     let disposed = false;
     void preloadWebsiteIcon(host, src).then((nextStatus) => {
@@ -82,7 +99,21 @@ export default function WebsiteIcon(props: WebsiteIconProps) {
     return () => {
       disposed = true;
     };
-  }, [host, src, shouldLoad, status]);
+  }, [demoIconUrl, host, src, shouldLoad, status]);
+
+  if (demoIconUrl) {
+    return (
+      <span className="list-icon-stack" ref={nodeRef}>
+        <img
+          className="list-icon loaded"
+          src={demoIconUrl}
+          alt=""
+          loading="lazy"
+          decoding="async"
+        />
+      </span>
+    );
+  }
 
   if (!host || status === 'error') {
     return <span className="list-icon-fallback">{props.fallback ?? <Globe size={18} />}</span>;
@@ -103,3 +134,4 @@ export default function WebsiteIcon(props: WebsiteIconProps) {
     </span>
   );
 }
+