feat(ui): splash screen to mask cold-start delay

[InstaZDLL]

Summary

• Main window now starts visible: false; a small transparent secondary window (splashscreen, 360×240, always-on-top, off the taskbar) shows the WaveFlow logo + indeterminate progress bar while the Rust setup chain runs and the React bundle parses.
• main.tsx reveals the main window after the first React frame (double requestAnimationFrame), then closes the splash — order matters so the desktop is never visible between the two.
• Especially noticeable on the very first launch after install, when Windows SmartScreen / Defender scans every freshly-extracted DLL and the cold WebView2 user-data folder is being created.

Why

Before: 10–30 s of empty white WebView on the first post-install launch. The duration was driven by AV scanning + WebView2 first-run init + the serial block_on chain in setup() (open app.db, run all sqlx migrations, create default profile, cold-init cpal/WASAPI, SMTC, …). User perceived the app as broken.

After: same total time (AV scanning is incompressible), but the user sees a branded loading widget instead of a white rectangle. Perception fixed.

Files

• public/splash.html — static HTML with inline SVG logo (the 5-bar equalizer from assets/logo.svg, same gradient as the README) and a pure-CSS indeterminate bar. Zero JS, paints the instant the WebView2 process spawns.
• src-tauri/tauri.conf.json — main window gets visible: false; new splashscreen window declared (transparent, decorations off, always-on-top, skipTaskbar, no shadow, no focus).
• src/main.tsx — revealMainWindow() after first frame: getCurrentWindow().show() then Window.getByLabel("splashscreen").close(). Skipped for the mini-player (?mini=1) which is its own window opened user-triggered.
• docs/features/ui.md — new "Splash screen" section.

Test plan

• bun run tauri build, uninstall any prior install + delete %LOCALAPPDATA%/waveflow, install fresh and launch — verify the splash appears immediately and the main window takes over without a white flash.
• Warm second launch — splash flashes briefly then main appears, no double-window glitch.
• Mini-player (PlayerBar → mini-player) still opens correctly and doesn't try to touch the splash.
• Multi-monitor / HiDPI — splash centres on the primary monitor.
• Linux / macOS smoke test if available — transparent: true + decorations: false are honoured everywhere we ship.

Summary by CodeRabbit

• New Features

  • Added an animated splash screen at startup showing the WaveFlow logo and a loading indicator; respects reduced-motion preferences, is accessible, uses a lightweight always-on-top transparent window, and is skipped in mini-player mode.

• Documentation

  • Added user-facing documentation describing the splash screen behavior and accessibility considerations.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 1a3aa326-3891-4575-8db6-202540666638

📥 Commits

Reviewing files that changed from the base of the PR and between 94011f3 and 4246a30.

📒 Files selected for processing (1)

• public/splash.html

---

📝 Walkthrough

Walkthrough

Adds a splash screen shown during cold start while the backend boots and the React bundle loads. The main window launches hidden; a frameless, always-on-top splashscreen window displays a WaveFlow logo and indeterminate progress. After the first React frame the main window is revealed and the splash closes; mini-player mode bypasses the splash.

Changes

Splash Screen Feature

Layer / File(s)	Summary
Splash window configuration and UI assets src-tauri/tauri.conf.json, public/splash.html	Tauri app.windows sets main.visible: false and adds a splashscreen window (fixed size, frameless, transparent, always-on-top, non-interactive). public/splash.html is a standalone dark-themed HTML page with centered card, SVG WaveFlow wordmark, animated gradient loading bar, role="status", and reduced-motion fallback.
Window visibility orchestration and feature documentation src/main.tsx, docs/features/ui.md	Adds @tauri-apps/api/window import and revealMainWindow() which, except when ?mini=1, waits two animation frames, shows the main Tauri window, then closes the splashscreen, with try/catch logging. Initialization calls revealMainWindow() before rendering React root; docs explain the hidden-main → splash → React takeover flow and mini-player bypass.

Sequence Diagram

sequenceDiagram
  participant Launcher as App launch (Tauri)
  participant Splash as splashscreen window
  participant Backend as Tauri backend
  participant Renderer as React renderer / main window
  Launcher->>Splash: display `splash.html` (always-on-top)
  Launcher->>Backend: start backend / boot
  Backend->>Renderer: serve React bundle
  Renderer->>Renderer: first React frame rendered
  Renderer->>Launcher: call revealMainWindow()
  Launcher->>Renderer: show main window
  Launcher->>Splash: close splashscreen

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A hush behind the loading bar so bright,
A WaveFlow mark that shimmers through the night,
The main one waits, unseen, then springs to view,
The splash retreats — the music plays anew,
Hoppy launches, smooth and light!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(ui): splash screen to mask cold-start delay' follows Conventional Commits format with kebab-case scope and clearly describes the main change: adding a splash screen to improve perceived startup time.
Description check	✅ Passed	The PR description is comprehensive, covering summary, rationale, implementation details, test plan, and all required checklist items; however, the description itself doesn't include the structured checklist from the template.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/splash-screen

Warning

Billing warning: we have not been able to collect payment for this subscription for more than 72 hours. Please update the payment method or pay any pending invoices in Billing to avoid service interruption.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@public/splash.html`:
- Line 2: The HTML splash has lang="fr" and a French aria-label ("Chargement de
WaveFlow"); update the document to be language-agnostic by either changing
lang="fr" to lang="en" or removing the lang attribute, and replace the French
aria-label on the splash element (the aria-label near line 96 referencing
"Chargement de WaveFlow") with an English equivalent like "Loading WaveFlow" or
a neutral label (or remove it) so screen readers in other locales won't get
French text.
- Line 41: The CSS rule -webkit-app-region: drag applied to the .card in
public/splash.html is likely redundant because the splash window is configured
focus: false in tauri.conf.json; inspect whether the splash is ever intended to
be draggable—if not, remove the -webkit-app-region: drag declaration from the
.card rule; if dragging is required, instead make the splash window focusable in
tauri.conf.json (set focus: true) or limit the drag region to a small header
element rather than the whole .card to avoid giving a non-interactive window a
drag region.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7bbf0a8d-6b3b-49a2-9ae7-3cbe041dbdc8

📥 Commits

Reviewing files that changed from the base of the PR and between 62701c3 and 94011f3.

📒 Files selected for processing (4)

• docs/features/ui.md
• public/splash.html
• src-tauri/tauri.conf.json
• src/main.tsx