diff options
Diffstat (limited to 'packages/desktop/src/loading.tsx')
| -rw-r--r-- | packages/desktop/src/loading.tsx | 136 |
1 files changed, 72 insertions, 64 deletions
diff --git a/packages/desktop/src/loading.tsx b/packages/desktop/src/loading.tsx index a1d537a00..ee2982722 100644 --- a/packages/desktop/src/loading.tsx +++ b/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 - - splash.style.animation = "none" - splash.style.animationPlayState = "paused" - splash.style.opacity = currentOpacity - - requestAnimationFrame(() => { - splash.style.transition = "opacity 0.3s ease" - requestAnimationFrame(() => { - splash.style.opacity = "1" + channel.onmessage = (next) => setStep(next) + commands.awaitInitialization(channel as any).catch(() => undefined) + + createEffect(() => { + if (phase() !== "sqlite_waiting") return + + 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> |