nox/src/App.svelte

<script lang="ts">
    import style from './App.module.scss';

    import Load from './page/Load/Load.svelte';
    import Greet from './page/Greet/Greet.svelte';

    import Titlebar from './widget/Titlebar/Titlebar.svelte';

    import { Router, Link, Route, navigate } from "svelte-routing";
    import RouteStore from './store/RouteStore';
    import Background from './widget/Background/Background.svelte';

    export let url = "/load";

    let page_faded = false;

    RouteStore.subscribe(() => {
        let new_url = RouteStore.getState().path;
        if (url == new_url) return;
        
        url = RouteStore.getState().path;
        page_faded = true;
        setTimeout(() => {
            navigate(url);
            page_faded = false;
        }, 550);
    });
    RouteStore.dispatch({ type: 'setPath', path: '/load' })

    setTimeout(() => { RouteStore.dispatch({ type: 'setPath', path: '/' }) }, 3000)
</script>

<Titlebar />
<Background />

<div class={style.backdrop} style={`opacity:${page_faded ? 0 : 1}`}>
    <div class={style['delay-show']}>
        <Router {url}>
            <Route path='/' component={Greet} />
            <Route path='/load' component={Load} />
        </Router>
    </div>
</div>