Fix: Splashscreen Appears on Boot

This commit is contained in:
Youwes09
2026-05-22 21:39:29 -05:00
parent 081becdd60
commit 6c39ef538f
3 changed files with 27 additions and 15 deletions
+5 -4
View File
@@ -27,8 +27,8 @@
onDismiss,
}: Props = $props()
const EXIT_MS = 320
const RING_R = 70
const EXIT_MS = 320
const RING_R = 70
const RING_PAD = 12
const { size: ringSize, c: ringC, circ: ringCirc } = ringGeometry(RING_R, RING_PAD)
@@ -80,6 +80,7 @@
exiting = false
return
}
if (failed || notConfigured) return
triggerExit(onReady)
})
@@ -204,7 +205,7 @@
.ring { transition:opacity 0.5s ease; }
.ring-hide { opacity:0; }
.bottom-area { display:flex; align-items:center; justify-content:center; min-height:48px; position:relative; }
.bottom-area { display:flex; align-items:center; justify-content:center; min-height:48px; position:relative; }
.status-slot { display:flex; align-items:center; justify-content:center; transition:opacity 0.35s ease; position:absolute; }
.status-slot-hide { opacity:0; pointer-events:none; }
.status-text { font-family:var(--font-ui); font-size:10px; color:var(--text-faint); letter-spacing:0.12em; margin:0; min-width:160px; text-align:center; }
@@ -216,4 +217,4 @@
.err-btn:hover { border-color:var(--border-strong); color:var(--text-secondary); }
.err-btn--primary { border-color:var(--accent-dim); color:var(--accent-fg); background:var(--accent-muted); }
.err-btn--primary:hover { border-color:var(--accent); color:var(--accent-bright); }
</style>
</style>
+19 -9
View File
@@ -10,25 +10,35 @@
let { children } = $props()
const isTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
const ringFull = $derived(appState.status !== 'booting')
const splashDone = $derived(
const isTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
const ringFull = $derived(appState.status !== 'booting')
let splashVisible = $state(true)
let bypassed = $state(false)
const showApp = $derived(
appState.status === 'ready' ||
appState.status === 'auth' ||
appState.status === 'error'
bypassed
)
let bypassed = $state(false)
const showApp = $derived(splashDone && (appState.status === 'ready' || appState.status === 'auth' || bypassed))
function onSplashReady() {
splashVisible = false
}
function onSplashBypass() {
bypassed = true
splashVisible = false
}
</script>
{#if !showApp}
{#if splashVisible}
<SplashScreen
mode="loading"
{ringFull}
failed={appState.status === 'error'}
onReady={() => {}}
onBypass={() => (bypassed = true)}
onReady={onSplashReady}
onBypass={onSplashBypass}
onRetry={() => window.location.reload()}
/>
{/if}
+3 -2
View File
@@ -1,2 +1,3 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
<script lang="ts">
</script>