[ionic migration] initial loading is too slow

[sahilc0]

on ios PWA, app open has a white screen that takes some time to load

[arkanaai]

Codebase Context

The white screen on iOS PWA open is rooted in the service worker wallet initialization sequence in src/providers/wallet.tsx.

Key files:

• src/providers/wallet.tsx — initSvcWorkerWallet() (lines ~342–520) is the main blocker
• src/App.tsx — navigation is gated on allChecksReady and dataReady flags; app stays on Pages.Loading until all pass
• src/components/LoadingLogo.tsx — full-screen overlay that should cover the white screen, but only mounts after React hydrates
• index.html — inline theme bootstrap script (lines 51–64) runs before first paint to prevent flash, but only handles dark/light theme

The white screen window:
Between browser painting the blank HTML shell and React mounting + LoadingLogo rendering, there is a gap with no visual content — especially pronounced on iOS PWA because the home screen launch re-fetches the page rather than restoring from bfcache.

Blocking init chain:

1. Service worker zombie-check ping (500ms timeout)
2. ServiceWorkerWallet.setup() — up to 5s activation timeout, 30s message bus timeout, exponential backoff retries (1s → 16s)
3. Data reload: getVtxos, getTxHistory, getBalance, asset metadata loop (sequential awaits)

---

Acceptance Criteria

• White screen on iOS PWA cold launch is ≤ 500ms (measure from tap to first non-white pixel)
• A loading indicator (logo or spinner) is visible within 200ms of launch
• Service worker init timeout/retry does not extend the perceived blank period
• No regression on Android PWA or desktop Chrome
• Works for both first install and returning user flows

---

Suggested Approach

Quick win — push loading UI earlier:
Move a minimal CSS-only loading indicator into index.html (alongside the existing theme bootstrap script) so something is visible before React even mounts. This eliminates the React hydration gap entirely.

<!-- index.html, after theme bootstrap script -->
<style>
  #splash { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); }
</style>
<div id="splash"><!-- inline SVG logo here --></div>
<!-- React mounts into #root and hides #splash once LoadingLogo takes over -->

Medium-term — reduce SW activation time:

• SERVICE_WORKER_ACTIVATION_TIMEOUT_MS is currently 5s; consider if a shorter first-attempt timeout with faster fallback is viable on iOS
• The status-ping interval (1s polling on svcWallet.getStatus()) starts after init but is worth auditing for unnecessary re-renders during the loading phase
• Parallelize asset metadata fetches (currently a sequential await loop in reloadWallet)

iOS-specific note:
iOS Safari PWAs re-navigate on every launch (no bfcache restoration), so the full boot sequence runs every time — making every ms in the critical path count more than on Android.