78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
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, 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)
|
|
|
|
onMount(async () => {
|
|
await new Promise((res) => setTimeout(res, 3000))
|
|
setTextIndex(1)
|
|
await new Promise((res) => setTimeout(res, 6000))
|
|
setTextIndex(2)
|
|
})
|
|
|
|
return <>{textItems[textIndex()]}</>
|
|
}}
|
|
</Match>
|
|
</Switch>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</MetaProvider>
|
|
)
|
|
}, root)
|