White Screen on Initial Load Due to Blocking App Initialization

[daniel-slaugh]

Summary

On initial load (especially after a fresh deployment), the app shows a white screen for ~10 seconds before first paint.

Observed Behavior

White screen appears immediately after navigation
No UI is rendered during this time
After ~10 seconds, the app fully loads and renders
Subsequent reloads are fast

Expected Behavior

The app should render immediately (shell/layout/loading state)
Data fetching and initialization should occur after first paint
Users should never see a blank screen

🔍 Investigation Findings

HAR analysis shows:
All network requests are fast (< 300 ms)
No slow document request (rules out backend cold start)
The delay is not network-related
Root cause is likely blocking initialization in main.ts before app.mount()

await createHydroServer(...);
await vocabularyStore.fetchAllVocabularies();
await hs.user.get();
await hs.workspaces.listAllItems();
app.mount('#app');

💡 Proposed Solution

Mount the app immediately, then perform initialization asynchronously.