Skip to content

Commit 5f42188

Browse files
adamdotdevinadamdotdevin
committed
chore: style loading screen
1 parent fa97475 commit 5f42188

8 files changed

Lines changed: 179 additions & 87 deletions

File tree

‎packages/desktop/src/index.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
// @refresh reload
22
import { webviewZoom } from "./webview-zoom"
33
import { render } from "solid-js/web"
4-
import {
5-
AppBaseProviders,
6-
AppInterface,
7-
PlatformProvider,
8-
Platform,
9-
DisplayBackend,
10-
useCommand,
11-
} from "@opencode-ai/app"
4+
import { AppBaseProviders, AppInterface, PlatformProvider, Platform, useCommand } from "@opencode-ai/app"
125
import { open, save } from "@tauri-apps/plugin-dialog"
136
import { getCurrent, onOpenUrl } from "@tauri-apps/plugin-deep-link"
147
import { openPath as openerOpenPath } from "@tauri-apps/plugin-opener"
@@ -29,7 +22,7 @@ import { UPDATER_ENABLED } from "./updater"
2922
import { initI18n, t } from "./i18n"
3023
import pkg from "../package.json"
3124
import "./styles.css"
32-
import { commands, InitStep, type WslConfig } from "./bindings"
25+
import { commands, InitStep } from "./bindings"
3326
import { Channel } from "@tauri-apps/api/core"
3427
import { createMenu } from "./menu"
3528

@@ -487,11 +480,9 @@ type ServerReadyData = { url: string; password: string | null }
487480
// Gate component that waits for the server to be ready
488481
function ServerGate(props: { children: (data: Accessor<ServerReadyData>) => JSX.Element }) {
489482
const [serverData] = createResource(() => commands.awaitInitialization(new Channel<InitStep>() as any))
490-
491483
if (serverData.state === "errored") throw serverData.error
492484

493485
return (
494-
// Not using suspense as not all components are compatible with it (undefined refs)
495486
<Show
496487
when={serverData.state !== "pending" && serverData()}
497488
fallback={

‎packages/desktop/src/loading.tsx‎

Lines changed: 72 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,87 +3,95 @@ import { MetaProvider } from "@solidjs/meta"
33
import "@opencode-ai/app/index.css"
44
import { Font } from "@opencode-ai/ui/font"
55
import { Splash } from "@opencode-ai/ui/logo"
6+
import { Progress } from "@opencode-ai/ui/progress"
67
import "./styles.css"
7-
import { createSignal, Match, onCleanup, onMount } from "solid-js"
8+
import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
89
import { commands, events, InitStep } from "./bindings"
910
import { Channel } from "@tauri-apps/api/core"
10-
import { Switch } from "solid-js"
1111

1212
const root = document.getElementById("root")!
13+
const lines = ["Just a moment...", "Migrating your database", "This may take a couple of minutes"]
14+
const delays = [3000, 9000]
1315

1416
render(() => {
15-
let splash!: SVGSVGElement
16-
const [state, setState] = createSignal<InitStep | null>(null)
17+
const [step, setStep] = createSignal<InitStep | null>(null)
18+
const [line, setLine] = createSignal(0)
19+
const [percent, setPercent] = createSignal(0)
20+
21+
const phase = createMemo(() => step()?.phase)
22+
23+
const value = createMemo(() => {
24+
if (phase() === "done") return 100
25+
return Math.max(25, Math.min(100, percent()))
26+
})
1727

1828
const channel = new Channel<InitStep>()
19-
channel.onmessage = (e) => setState(e)
20-
commands.awaitInitialization(channel as any).then(() => {
21-
const currentOpacity = getComputedStyle(splash).opacity
22-
23-
splash.style.animation = "none"
24-
splash.style.animationPlayState = "paused"
25-
splash.style.opacity = currentOpacity
26-
27-
requestAnimationFrame(() => {
28-
splash.style.transition = "opacity 0.3s ease"
29-
requestAnimationFrame(() => {
30-
splash.style.opacity = "1"
29+
channel.onmessage = (next) => setStep(next)
30+
commands.awaitInitialization(channel as any).catch(() => undefined)
31+
32+
createEffect(() => {
33+
if (phase() !== "sqlite_waiting") return
34+
35+
setLine(0)
36+
setPercent(0)
37+
38+
const timers = delays.map((ms, i) => setTimeout(() => setLine(i + 1), ms))
39+
40+
let stop: (() => void) | undefined
41+
let active = true
42+
43+
void events.sqliteMigrationProgress
44+
.listen((e) => {
45+
if (e.payload.type === "InProgress") setPercent(Math.max(0, Math.min(100, e.payload.value)))
46+
if (e.payload.type === "Done") setPercent(100)
3147
})
48+
.then((unlisten) => {
49+
if (active) {
50+
stop = unlisten
51+
return
52+
}
53+
54+
unlisten()
55+
})
56+
.catch(() => undefined)
57+
58+
onCleanup(() => {
59+
active = false
60+
timers.forEach(clearTimeout)
61+
stop?.()
3262
})
3363
})
3464

65+
createEffect(() => {
66+
if (phase() !== "done") return
67+
68+
const timer = setTimeout(() => events.loadingWindowComplete.emit(null), 1000)
69+
onCleanup(() => clearTimeout(timer))
70+
})
71+
72+
const status = createMemo(() => {
73+
if (phase() === "done") return "All done"
74+
if (phase() === "sqlite_waiting") return lines[line()]
75+
return "Just a moment..."
76+
})
77+
3578
return (
3679
<MetaProvider>
3780
<div class="w-screen h-screen bg-background-base flex items-center justify-center">
3881
<Font />
39-
<div class="flex flex-col items-center gap-10">
40-
<Splash ref={splash} class="h-25 animate-[pulse-splash_2s_ease-in-out_infinite]" />
41-
<span class="text-text-base">
42-
<Switch fallback="Just a moment...">
43-
<Match when={state()?.phase === "done"}>
44-
{(_) => {
45-
onMount(() => {
46-
setTimeout(() => events.loadingWindowComplete.emit(null), 1000)
47-
})
48-
49-
return "All done"
50-
}}
51-
</Match>
52-
<Match when={state()?.phase === "sqlite_waiting"}>
53-
{(_) => {
54-
const textItems = [
55-
"Just a moment...",
56-
"Migrating your database",
57-
"This could take a couple of minutes",
58-
]
59-
const [textIndex, setTextIndex] = createSignal(0)
60-
const [progress, setProgress] = createSignal(0)
61-
62-
onMount(async () => {
63-
const listener = events.sqliteMigrationProgress.listen((e) => {
64-
if (e.payload.type === "InProgress") setProgress(e.payload.value)
65-
})
66-
onCleanup(() => listener.then((c) => c()))
67-
68-
await new Promise((res) => setTimeout(res, 3000))
69-
setTextIndex(1)
70-
await new Promise((res) => setTimeout(res, 6000))
71-
setTextIndex(2)
72-
})
73-
74-
return (
75-
<div class="flex flex-col items-center gap-1">
76-
<span>{textItems[textIndex()]}</span>
77-
<span>Progress: {progress()}%</span>
78-
<div class="h-2 w-48 rounded-full border border-white relative">
79-
<div class="bg-[#fff] h-full absolute left-0 inset-y-0" style={{ width: `${progress()}%` }} />
80-
</div>
81-
</div>
82-
)
83-
}}
84-
</Match>
85-
</Switch>
86-
</span>
82+
<div class="flex flex-col items-center gap-11">
83+
<Splash class="w-20 h-25 opacity-15" />
84+
<div class="w-60 flex flex-col items-center gap-4" aria-live="polite">
85+
<span class="w-full overflow-hidden text-center text-ellipsis whitespace-nowrap text-text-strong text-14-normal">
86+
{status()}
87+
</span>
88+
<Progress
89+
value={value()}
90+
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"
91+
aria-label="Database migration progress"
92+
getValueLabel={({ value }) => `${Math.round(value)}%`}
93+
/>
94+
</div>
8795
</div>
8896
</div>
8997
</MetaProvider>

‎packages/desktop/src/styles.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,3 @@ button#decorum-tb-close,
55
div[data-tauri-decorum-tb] {
66
height: calc(var(--spacing) * 10) !important;
77
}
8-
9-
@keyframes pulse-splash {
10-
0%,
11-
100% {
12-
opacity: 0.1;
13-
}
14-
50% {
15-
opacity: 0.3;
16-
}
17-
}

‎packages/ui/src/components/progress.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
[data-component="progress"] {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 4px;
5+
6+
[data-slot="progress-header"] {
7+
display: flex;
8+
align-items: center;
9+
justify-content: space-between;
10+
gap: 8px;
11+
}
12+
13+
[data-slot="progress-label"],
14+
[data-slot="progress-value-label"] {
15+
font-family: var(--font-family-sans);
16+
font-size: var(--font-size-small);
17+
font-weight: var(--font-weight-regular);
18+
line-height: var(--line-height-large);
19+
letter-spacing: var(--letter-spacing-normal);
20+
}
21+
22+
[data-slot="progress-label"] {
23+
color: var(--text-base);
24+
}
25+
26+
[data-slot="progress-value-label"] {
27+
color: var(--text-weak);
28+
font-variant-numeric: tabular-nums;
29+
}
30+
31+
[data-slot="progress-track"] {
32+
position: relative;
33+
width: 100%;
34+
height: 8px;
35+
overflow: hidden;
36+
border-radius: 999px;
37+
border: 1px solid var(--border-weak-base);
38+
background-color: var(--surface-base);
39+
}
40+
41+
[data-slot="progress-fill"] {
42+
height: 100%;
43+
width: var(--kb-progress-fill-width);
44+
border-radius: inherit;
45+
background-color: var(--border-active);
46+
transition: width 200ms ease;
47+
}
48+
49+
&[data-indeterminate] [data-slot="progress-fill"] {
50+
width: 35%;
51+
animation: progress-indeterminate 1.3s ease-in-out infinite;
52+
}
53+
}
54+
55+
@keyframes progress-indeterminate {
56+
from {
57+
transform: translateX(-100%);
58+
}
59+
60+
to {
61+
transform: translateX(300%);
62+
}
63+
}

‎packages/ui/src/components/progress.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Progress as Kobalte } from "@kobalte/core/progress"
2+
import { Show, splitProps } from "solid-js"
3+
import type { ComponentProps, ParentProps } from "solid-js"
4+
5+
export interface ProgressProps extends ParentProps<ComponentProps<typeof Kobalte>> {
6+
hideLabel?: boolean
7+
showValueLabel?: boolean
8+
}
9+
10+
export function Progress(props: ProgressProps) {
11+
const [local, others] = splitProps(props, ["children", "class", "classList", "hideLabel", "showValueLabel"])
12+
13+
return (
14+
<Kobalte
15+
{...others}
16+
data-component="progress"
17+
classList={{
18+
...(local.classList ?? {}),
19+
[local.class ?? ""]: !!local.class,
20+
}}
21+
>
22+
<Show when={local.children || local.showValueLabel}>
23+
<div data-slot="progress-header">
24+
<Show when={local.children}>
25+
<Kobalte.Label data-slot="progress-label" classList={{ "sr-only": local.hideLabel }}>
26+
{local.children}
27+
</Kobalte.Label>
28+
</Show>
29+
<Show when={local.showValueLabel}>
30+
<Kobalte.ValueLabel data-slot="progress-value-label" />
31+
</Show>
32+
</div>
33+
</Show>
34+
<Kobalte.Track data-slot="progress-track">
35+
<Kobalte.Fill data-slot="progress-fill" />
36+
</Kobalte.Track>
37+
</Kobalte>
38+
)
39+
}

‎packages/ui/src/styles/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
@import "../components/message-part.css" layer(components);
3737
@import "../components/message-nav.css" layer(components);
3838
@import "../components/popover.css" layer(components);
39+
@import "../components/progress.css" layer(components);
3940
@import "../components/progress-circle.css" layer(components);
4041
@import "../components/radio-group.css" layer(components);
4142
@import "../components/resize-handle.css" layer(components);

‎packages/ui/src/styles/theme.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -510,7 +510,7 @@
510510
--icon-success-base: var(--apple-dark-7);
511511
--icon-success-hover: var(--apple-dark-8);
512512
--icon-success-active: var(--apple-dark-11);
513-
--icon-warning-base: var(--amber-dark-7);
513+
--icon-warning-base: var(--amber-dark-9);
514514
--icon-warning-hover: var(--amber-dark-8);
515515
--icon-warning-active: var(--amber-dark-11);
516516
--icon-critical-base: var(--ember-dark-9);

‎packages/ui/src/theme/themes/oc-1.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -444,7 +444,7 @@
444444
"icon-success-base": "var(--apple-dark-9)",
445445
"icon-success-hover": "var(--apple-dark-10)",
446446
"icon-success-active": "var(--apple-dark-11)",
447-
"icon-warning-base": "var(--amber-dark-7)",
447+
"icon-warning-base": "var(--amber-dark-9)",
448448
"icon-warning-hover": "var(--amber-dark-8)",
449449
"icon-warning-active": "var(--amber-dark-11)",
450450
"icon-critical-base": "var(--ember-dark-9)",

0 commit comments

Comments
 (0)