1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import { render } from "solid-js/web"
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 "./styles.css"
import { createSignal, Match, onCleanup, onMount } 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")!
render(() => {
let splash!: SVGSVGElement
const [state, setState] = createSignal<InitStep | null>(null)
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"
})
})
})
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>
</div>
</MetaProvider>
)
}, root)
|
