Optimize the public sending page and navigation logic in presentation mode to ensure consistency in user experience

webapp/src/components/PublicSendPage.tsx

@@ -87,12 +87,13 @@ function parsePublicSendData(value: unknown): PublicSendData | null {
 }
 
 export default function PublicSendPage(props: PublicSendPageProps) {
-  const [loading, setLoading] = useState(true);
+  const initialDemoSend = IS_DEMO_MODE ? getDemoPublicSend(props.accessId) : null;
+  const [loading, setLoading] = useState(!IS_DEMO_MODE);
   const [password, setPassword] = useState('');
   const [needPassword, setNeedPassword] = useState(false);
   const [error, setError] = useState('');
-  const [notFound, setNotFound] = useState(false);
-  const [sendData, setSendData] = useState<PublicSendData | null>(null);
+  const [notFound, setNotFound] = useState(IS_DEMO_MODE && !initialDemoSend);
+  const [sendData, setSendData] = useState<PublicSendData | null>(initialDemoSend);
   const [busy, setBusy] = useState(false);
   const [downloadPercent, setDownloadPercent] = useState<number | null>(null);
   const loadRequestRef = useRef(0);
@@ -201,6 +202,15 @@ export default function PublicSendPage(props: PublicSendPageProps) {
   }
 
   useEffect(() => {
+    if (IS_DEMO_MODE) {
+      const demoSend = getDemoPublicSend(props.accessId);
+      setSendData(demoSend);
+      setNotFound(!demoSend);
+      setNeedPassword(false);
+      setError('');
+      setLoading(false);
+      return;
+    }
     void loadSend();
     return () => {
       loadAbortRef.current?.abort();

webapp/src/components/SendsPage.tsx

@@ -224,8 +224,17 @@ export default function SendsPage(props: SendsPageProps) {
     }
   }
 
+  function getAccessUrl(send: Send): string {
+    const rawUrl = send.shareUrl || `/send/${send.accessId}`;
+    if (/^https?:\/\//i.test(rawUrl)) return rawUrl;
+    if (rawUrl.startsWith('/#/')) return `${window.location.origin}${rawUrl}`;
+    if (rawUrl.startsWith('#/')) return `${window.location.origin}/${rawUrl}`;
+    if (rawUrl.startsWith('/')) return `${window.location.origin}/#${rawUrl}`;
+    return `${window.location.origin}/#/${rawUrl.replace(/^\/+/, '')}`;
+  }
+
   function copyAccessUrl(send: Send): void {
-    const url = send.shareUrl || `${window.location.origin}/#/send/${send.accessId}`;
+    const url = getAccessUrl(send);
     void copyTextToClipboard(url, { successMessage: t('txt_link_copied') });
   }
 

webapp/src/components/vault/WebsiteIcon.tsx

@@ -8,6 +8,7 @@ import {
   preloadWebsiteIcon,
   subscribeWebsiteIconStatus,
 } from '@/lib/website-icon-cache';
+import { demoBrandIconUrl } from '@/lib/demo-brand-icons';
 import { firstCipherUri, hostFromUri, websiteIconUrl } from '@/lib/website-utils';
 
 const ICON_LOAD_ROOT_MARGIN = '180px 0px';
@@ -25,21 +26,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 [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]);
+  const demoIconUrl = SHOULD_LOAD_DEMO_BRAND_ICONS && host ? demoBrandIconUrl(host) : '';
 
   useEffect(() => {
     if (!host) {
@@ -88,6 +75,7 @@ export default function WebsiteIcon(props: WebsiteIconProps) {
   }, [host, shouldLoad, status]);
 
   useEffect(() => {
+    if (SHOULD_LOAD_DEMO_BRAND_ICONS) return;
     if (demoIconUrl) return;
     if (!host || !src || !shouldLoad || status === 'loaded' || status === 'error') return;
     let disposed = false;