Perf/cold start

.changeset/perf-cold-start-bundle.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Speed up cold start by keeping the PDF viewer out of the initial bundle (it now loads on demand), cutting the amount of JavaScript fetched and parsed on launch. The desktop and mobile windows also paint the app's background color immediately, so startup no longer flashes a blank black screen before the first frame.

index.html

@@ -143,6 +143,23 @@
     <script>
       window.global ||= window;
     </script>
+    <script>
+      (function () {
+        var base = '%BASE_URL%';
+        var lng = (localStorage.getItem('i18nextLng') || navigator.language || 'en').split('-')[0];
+        var configPromise = fetch(base + 'config.json').then(function (r) {
+          if (!r.ok) return undefined;
+          return r.json();
+        });
+        var localePromise = fetch(base + 'public/locales/' + lng + '.json');
+        window.__SABLE_PRELOAD = {
+          config: configPromise,
+          locale: { lng: lng, promise: localePromise },
+        };
+        configPromise.catch(function () {});
+        localePromise.catch(function () {});
+      })();
+    </script>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>

src-tauri/src/lib.rs

@@ -105,7 +105,8 @@ pub fn show_or_create_main_window(app: &AppHandle<crate::BrowserEngine>) -> taur
     let builder =
         tauri::WebviewWindowBuilder::new(app, MAIN_WINDOW_LABEL, tauri::WebviewUrl::default())
             .disable_drag_drop_handler()
-            .use_https_scheme(true);
+            .use_https_scheme(true)
+            .background_color(tauri::window::Color(0x1A, 0x1C, 0x28, 0xFF));
 
     #[cfg(desktop)]
     let title = if app
@@ -276,6 +277,25 @@ pub fn run() {
 
             show_or_create_main_window(app.handle())?;
 
+            // Failsafe: if the frontend never calls show() (hung webview), force-show
+            // the window after 5s so the app isn't invisible forever.
+            #[cfg(desktop)]
+            {
+                let handle = app.handle().clone();
+                std::thread::spawn(move || {
+                    std::thread::sleep(std::time::Duration::from_secs(5));
+                    if let Some(window) = handle.get_webview_window(MAIN_WINDOW_LABEL) {
+                        if !window.is_visible().unwrap_or(true) {
+                            let _ = window.show();
+                            let _ = window.set_focus();
+                            log::warn!(
+                                "Frontend show() not received within 5s — force-showing window"
+                            );
+                        }
+                    }
+                });
+            }
+
             #[cfg(target_os = "ios")]
             if let Some(window) = app.get_webview_window(MAIN_WINDOW_LABEL) {
                 ios::hide_form_accessory_bar(&window);

src/app/components/ClientConfigLoader.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Button, Dialog, Text, color, config } from 'folds';
 import type { ClientConfig } from '$hooks/useClientConfig';
+import { takePreloadedConfig } from '$utils/preload';
 import { trimTrailingSlash } from '$utils/common';
 import { fetch } from '$utils/fetch';
 import { SplashScreen } from '$components/splash-screen';
@@ -14,6 +15,15 @@ export const FALLBACK_CLIENT_CONFIG: ClientConfig = {
 };
 
 export const getClientConfig = async (): Promise<ClientConfig> => {
+  const preloaded = takePreloadedConfig();
+  if (preloaded !== undefined) {
+    const data = await preloaded.catch(() => undefined);
+    if (data && typeof data === 'object' && !Array.isArray(data)) {
+      return data as ClientConfig;
+    }
+    // Preload missed or invalid — fall through to fresh fetch.
+  }
+
   const url = `${trimTrailingSlash(import.meta.env.BASE_URL)}/config.json`;
   const response = await fetch(url, { method: 'GET' });
   if (!response.ok) {

src/app/components/page/MobileNavDrawer.tsx

@@ -269,14 +269,18 @@ export function MobileNavDrawer({ nav, rail, bottomNav, children }: MobileNavDra
         return;
       }
 
-      if (mx > DIRECTION_DEADZONE || !canOpenRoom) {
+      if (mx > DIRECTION_DEADZONE) {
         if (draggingRef.current) {
           draggingRef.current = false;
           settle(0);
         }
         cancel();
         return;
       }
+      if (!canOpenRoom && mx < -DIRECTION_DEADZONE) {
+        cancel();
+        return;
+      }
       if (active) {
         if (first) {
           x.stop();
@@ -307,6 +311,7 @@ export function MobileNavDrawer({ nav, rail, bottomNav, children }: MobileNavDra
     {
       axis: 'x',
       filterTaps: true,
+      tapsThreshold: DIRECTION_DEADZONE,
       pointer: { capture: false },
       from: () => [readX(), 0],
     }

src/app/components/tauri/TauriFrontendReady.test.tsx

@@ -35,12 +35,20 @@ function setDocumentReadyState(value: DocumentReadyState) {
   });
 }
 
+function setDocumentVisibility(value: DocumentVisibilityState) {
+  Object.defineProperty(document, 'visibilityState', {
+    configurable: true,
+    value,
+  });
+}
+
 describe('TauriFrontendReady', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockIsTauri.mockReturnValue(true);
     mockGetCurrentWindow.mockReturnValue({ show: mockShow });
     setDocumentReadyState('complete');
+    setDocumentVisibility('visible');
   });
 
   afterEach(() => {
@@ -77,9 +85,10 @@ describe('TauriFrontendReady', () => {
     expect(mockGetCurrentWindow).toHaveBeenCalledOnce();
   });
 
-  it('waits for the window load event before showing the desktop window', async () => {
+  it('falls back to the load event when the document is hidden and still loading', async () => {
     const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
     mockOsType.mockReturnValue('linux');
+    setDocumentVisibility('hidden');
     setDocumentReadyState('loading');
 
     render(<TauriFrontendReady />);

src/app/components/tauri/TauriFrontendReady.tsx

@@ -6,20 +6,23 @@ import { createLogger } from '$utils/debug';
 
 const log = createLogger('TauriFrontendReady');
 
-function onPageFullyLoaded(cb: () => void): () => void {
-  if (document.readyState === 'complete') {
-    cb();
-    return () => {};
+// Show the window at the first paint frame after the shell mounts, not after
+// the full `window.load` event (which fires after ALL resources). This cuts the
+// perceived blank-screen time substantially on desktop cold starts.
+function showOnFirstPaint(cb: () => void): () => void {
+  if (document.visibilityState === 'hidden') {
+    // Headless/test: fall back to load event to avoid showing a hidden window.
+    if (document.readyState === 'complete') {
+      cb();
+      return () => {};
+    }
+    const handleLoad = () => cb();
+    window.addEventListener('load', handleLoad, { once: true });
+    return () => window.removeEventListener('load', handleLoad);
   }
 
-  const handleLoad = () => {
-    cb();
-  };
-
-  window.addEventListener('load', handleLoad, { once: true });
-  return () => {
-    window.removeEventListener('load', handleLoad);
-  };
+  const id = requestAnimationFrame(() => cb());
+  return () => cancelAnimationFrame(id);
 }
 
 export function TauriFrontendReady() {
@@ -30,9 +33,9 @@ export function TauriFrontendReady() {
     if (os !== 'windows' && os !== 'linux' && os !== 'macos') return undefined;
 
     const appWindow = getCurrentWindow();
-    return onPageFullyLoaded(() => {
+    return showOnFirstPaint(() => {
       appWindow.show().catch((error) => {
-        log.warn('Failed to show main window after frontend fully loaded:', error);
+        log.warn('Failed to show main window after first paint:', error);
       });
     });
   }, []);

src/app/i18n.ts

@@ -4,6 +4,12 @@ import type { HttpBackendOptions } from 'i18next-http-backend';
 import Backend from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 import { trimTrailingSlash } from './utils/common';
+import { takePreloadedLocale } from './utils/preload';
+
+const langFromUrl = (url: string): string | undefined => {
+  const match = url.match(/\/public\/locales\/([^/]+)\.json/);
+  return match?.[1];
+};
 
 i18n
   // i18next-http-backend
@@ -26,6 +32,11 @@ i18n
     load: 'languageOnly',
     backend: {
       loadPath: `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/locales/{{lng}}.json`,
+      alternateFetch: (url: string) => {
+        const lng = langFromUrl(url);
+        if (!lng) return undefined;
+        return takePreloadedLocale(lng) ?? undefined;
+      },
     },
   });