Added the preload demo experience feature to support presentation mode

webapp/src/App.tsx

@@ -30,7 +30,7 @@ import {
   parseSignalRTextFrames,
   readInviteCodeFromUrl,
 } from '@/lib/app-support';
-import { preloadAuthenticatedWorkspace } from '@/lib/app-preload';
+import { preloadAuthenticatedWorkspace, preloadDemoExperience } from '@/lib/app-preload';
 import {
   bootstrapAppSession,
   type CompletedLogin,
@@ -960,6 +960,11 @@ export default function App() {
     staleTime: 30_000,
   });
 
+  useEffect(() => {
+    if (!IS_DEMO_MODE) return;
+    return preloadDemoExperience();
+  }, []);
+
   useEffect(() => {
     if (IS_DEMO_MODE) return;
     if (phase !== 'app' || !vaultInitialDecryptDone) return;

webapp/src/lib/app-preload.ts

@@ -1,5 +1,6 @@
 let workspacePreload: Promise<unknown> | null = null;
 let adminPreload: Promise<unknown> | null = null;
+let demoExperiencePreloadStarted = false;
 
 export function preloadAuthenticatedWorkspace(isAdmin: boolean): Promise<unknown> {
   if (!workspacePreload) {
@@ -25,3 +26,48 @@ export function preloadAuthenticatedWorkspace(isAdmin: boolean): Promise<unknown
 
   return adminPreload;
 }
+
+export function preloadDemoExperience(): () => void {
+  if (demoExperiencePreloadStarted || typeof window === 'undefined') {
+    return () => undefined;
+  }
+
+  demoExperiencePreloadStarted = true;
+  let cancelled = false;
+  let timerId: number | null = null;
+
+  const tasks = [
+    () => import('@/components/VaultPage'),
+    () => import('@/components/SendsPage'),
+    () => import('@/components/TotpCodesPage'),
+    () => import('@/components/SettingsPage'),
+    () => import('@/components/SecurityDevicesPage'),
+    () => import('@/components/AdminPage'),
+    () => import('@/components/BackupCenterPage'),
+    () => import('@/components/ImportPage'),
+  ];
+
+  const wait = (ms: number) => new Promise<void>((resolve) => {
+    timerId = window.setTimeout(() => {
+      timerId = null;
+      resolve();
+    }, ms);
+  });
+
+  void (async () => {
+    await wait(120);
+    for (const task of tasks) {
+      if (cancelled) return;
+      await task().catch(() => undefined);
+      await wait(180);
+    }
+  })();
+
+  return () => {
+    cancelled = true;
+    if (timerId !== null) {
+      window.clearTimeout(timerId);
+      timerId = null;
+    }
+  };
+}