chore: style loading screen

packages/desktop/src/index.tsx

@@ -1,14 +1,7 @@
 // @refresh reload
 import { webviewZoom } from "./webview-zoom"
 import { render } from "solid-js/web"
-import {
-  AppBaseProviders,
-  AppInterface,
-  PlatformProvider,
-  Platform,
-  DisplayBackend,
-  useCommand,
-} from "@opencode-ai/app"
+import { AppBaseProviders, AppInterface, PlatformProvider, Platform, useCommand } from "@opencode-ai/app"
 import { open, save } from "@tauri-apps/plugin-dialog"
 import { getCurrent, onOpenUrl } from "@tauri-apps/plugin-deep-link"
 import { openPath as openerOpenPath } from "@tauri-apps/plugin-opener"
@@ -29,7 +22,7 @@ import { UPDATER_ENABLED } from "./updater"
 import { initI18n, t } from "./i18n"
 import pkg from "../package.json"
 import "./styles.css"
-import { commands, InitStep, type WslConfig } from "./bindings"
+import { commands, InitStep } from "./bindings"
 import { Channel } from "@tauri-apps/api/core"
 import { createMenu } from "./menu"
 
@@ -487,11 +480,9 @@ type ServerReadyData = { url: string; password: string | null }
 // Gate component that waits for the server to be ready
 function ServerGate(props: { children: (data: Accessor<ServerReadyData>) => JSX.Element }) {
   const [serverData] = createResource(() => commands.awaitInitialization(new Channel<InitStep>() as any))
-
   if (serverData.state === "errored") throw serverData.error
 
   return (
-    // Not using suspense as not all components are compatible with it (undefined refs)
     <Show
       when={serverData.state !== "pending" && serverData()}
       fallback={

packages/desktop/src/loading.tsx

@@ -3,87 +3,95 @@ import { MetaProvider } from "@solidjs/meta"
 import "@opencode-ai/app/index.css"
 import { Font } from "@opencode-ai/ui/font"
 import { Splash } from "@opencode-ai/ui/logo"
+import { Progress } from "@opencode-ai/ui/progress"
 import "./styles.css"
-import { createSignal, Match, onCleanup, onMount } from "solid-js"
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { commands, events, InitStep } from "./bindings"
 import { Channel } from "@tauri-apps/api/core"
-import { Switch } from "solid-js"
 
 const root = document.getElementById("root")!
+const lines = ["Just a moment...", "Migrating your database", "This may take a couple of minutes"]
+const delays = [3000, 9000]
 
 render(() => {
-  let splash!: SVGSVGElement
-  const [state, setState] = createSignal<InitStep | null>(null)
+  const [step, setStep] = createSignal<InitStep | null>(null)
+  const [line, setLine] = createSignal(0)
+  const [percent, setPercent] = createSignal(0)
+
+  const phase = createMemo(() => step()?.phase)
+
+  const value = createMemo(() => {
+    if (phase() === "done") return 100
+    return Math.max(25, Math.min(100, percent()))
+  })
 
   const channel = new Channel<InitStep>()
-  channel.onmessage = (e) => setState(e)
-  commands.awaitInitialization(channel as any).then(() => {
-    const currentOpacity = getComputedStyle(splash).opacity
+  channel.onmessage = (next) => setStep(next)
+  commands.awaitInitialization(channel as any).catch(() => undefined)
 
-    splash.style.animation = "none"
-    splash.style.animationPlayState = "paused"
-    splash.style.opacity = currentOpacity
+  createEffect(() => {
+    if (phase() !== "sqlite_waiting") return
 
-    requestAnimationFrame(() => {
-      splash.style.transition = "opacity 0.3s ease"
-      requestAnimationFrame(() => {
-        splash.style.opacity = "1"
+    setLine(0)
+    setPercent(0)
+
+    const timers = delays.map((ms, i) => setTimeout(() => setLine(i + 1), ms))
+
+    let stop: (() => void) | undefined
+    let active = true
+
+    void events.sqliteMigrationProgress
+      .listen((e) => {
+        if (e.payload.type === "InProgress") setPercent(Math.max(0, Math.min(100, e.payload.value)))
+        if (e.payload.type === "Done") setPercent(100)
       })
+      .then((unlisten) => {
+        if (active) {
+          stop = unlisten
+          return
+        }
+
+        unlisten()
+      })
+      .catch(() => undefined)
+
+    onCleanup(() => {
+      active = false
+      timers.forEach(clearTimeout)
+      stop?.()
     })
   })
 
+  createEffect(() => {
+    if (phase() !== "done") return
+
+    const timer = setTimeout(() => events.loadingWindowComplete.emit(null), 1000)
+    onCleanup(() => clearTimeout(timer))
+  })
+
+  const status = createMemo(() => {
+    if (phase() === "done") return "All done"
+    if (phase() === "sqlite_waiting") return lines[line()]
+    return "Just a moment..."
+  })
+
   return (
     <MetaProvider>
       <div class="w-screen h-screen bg-background-base flex items-center justify-center">
         <Font />
-        <div class="flex flex-col items-center gap-10">
-          <Splash ref={splash} class="h-25 animate-[pulse-splash_2s_ease-in-out_infinite]" />
-          <span class="text-text-base">
-            <Switch fallback="Just a moment...">
-              <Match when={state()?.phase === "done"}>
-                {(_) => {
-                  onMount(() => {
-                    setTimeout(() => events.loadingWindowComplete.emit(null), 1000)
-                  })
-
-                  return "All done"
-                }}
-              </Match>
-              <Match when={state()?.phase === "sqlite_waiting"}>
-                {(_) => {
-                  const textItems = [
-                    "Just a moment...",
-                    "Migrating your database",
-                    "This could take a couple of minutes",
-                  ]
-                  const [textIndex, setTextIndex] = createSignal(0)
-                  const [progress, setProgress] = createSignal(0)
-
-                  onMount(async () => {
-                    const listener = events.sqliteMigrationProgress.listen((e) => {
-                      if (e.payload.type === "InProgress") setProgress(e.payload.value)
-                    })
-                    onCleanup(() => listener.then((c) => c()))
-
-                    await new Promise((res) => setTimeout(res, 3000))
-                    setTextIndex(1)
-                    await new Promise((res) => setTimeout(res, 6000))
-                    setTextIndex(2)
-                  })
-
-                  return (
-                    <div class="flex flex-col items-center gap-1">
-                      <span>{textItems[textIndex()]}</span>
-                      <span>Progress: {progress()}%</span>
-                      <div class="h-2 w-48 rounded-full border border-white relative">
-                        <div class="bg-[#fff] h-full absolute left-0 inset-y-0" style={{ width: `${progress()}%` }} />
-                      </div>
-                    </div>
-                  )
-                }}
-              </Match>
-            </Switch>
-          </span>
+        <div class="flex flex-col items-center gap-11">
+          <Splash class="w-20 h-25 opacity-15" />
+          <div class="w-60 flex flex-col items-center gap-4" aria-live="polite">
+            <span class="w-full overflow-hidden text-center text-ellipsis whitespace-nowrap text-text-strong text-14-normal">
+              {status()}
+            </span>
+            <Progress
+              value={value()}
+              class="w-20 [&_[data-slot='progress-track']]:h-1 [&_[data-slot='progress-track']]:border-0 [&_[data-slot='progress-track']]:rounded-none [&_[data-slot='progress-track']]:bg-surface-weak [&_[data-slot='progress-fill']]:rounded-none [&_[data-slot='progress-fill']]:bg-icon-warning-base"
+              aria-label="Database migration progress"
+              getValueLabel={({ value }) => `${Math.round(value)}%`}
+            />
+          </div>
         </div>
       </div>
     </MetaProvider>

packages/desktop/src/styles.css

@@ -5,13 +5,3 @@ button#decorum-tb-close,
 div[data-tauri-decorum-tb] {
   height: calc(var(--spacing) * 10) !important;
 }
-
-@keyframes pulse-splash {
-  0%,
-  100% {
-    opacity: 0.1;
-  }
-  50% {
-    opacity: 0.3;
-  }
-}