58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { Show, onMount, onCleanup, createSignal } from "solid-js";
|
|
import { useSplash } from "../context/splash";
|
|
|
|
const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
|
|
|
|
export function TerminalSplash() {
|
|
const { showSplash, setShowSplash } = useSplash();
|
|
const [showing, setShowing] = createSignal(0);
|
|
const [isVisible, setIsVisible] = createSignal(true);
|
|
|
|
onMount(() => {
|
|
const interval = setInterval(() => {
|
|
setShowing((prev) => (prev + 1) % spinnerChars.length);
|
|
}, 50);
|
|
|
|
// Hide splash after 1.5 seconds
|
|
const timeoutId = setTimeout(() => {
|
|
setShowSplash(false);
|
|
}, 1500);
|
|
|
|
onCleanup(() => {
|
|
clearInterval(interval);
|
|
clearTimeout(timeoutId);
|
|
});
|
|
});
|
|
|
|
// Handle fade out when splash is hidden
|
|
const shouldRender = () => showSplash() || isVisible();
|
|
|
|
// Trigger fade out, then hide after transition
|
|
const opacity = () => {
|
|
if (!showSplash() && isVisible()) {
|
|
setTimeout(() => setIsVisible(false), 500);
|
|
return "0";
|
|
}
|
|
if (showSplash()) {
|
|
setIsVisible(true);
|
|
return "1";
|
|
}
|
|
return "0";
|
|
};
|
|
|
|
return (
|
|
<Show when={shouldRender()}>
|
|
<div
|
|
class="fixed inset-0 z-50 w-screen h-screen bg-base flex overflow-hidden flex-col items-center justify-center mx-auto transition-opacity duration-500"
|
|
style={{ opacity: opacity() }}
|
|
>
|
|
<div class="font-mono text-text text-4xl whitespace-pre-wrap p-8 max-w-3xl">
|
|
<div class="flex justify-center items-center">
|
|
{spinnerChars[showing()]}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
);
|
|
}
|