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 SignIn from './page/SignIn/SignIn.svelte';

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

    import { Router, Link, Route, navigate } from "svelte-routing";
    import RouteStore, { route } from './store/RouteStore';
    import Background from './widget/Background/Background.svelte';
    import Explore from './page/Explore/Explore.svelte';
    import Sidebar from './widget/Sidebar/Sidebar.svelte';
    import { setCSSVariableFor } from './lib/css_var';

    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(() => { route('/') }, 3000)
    setCSSVariableFor('sidebar-width', '0px', 3000);
</script>

<Titlebar />
<Background />
<Sidebar />

<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} />
            <Route path='/sign-in' component={SignIn} />
            <Route path='/explore' component={Explore} />
        </Router>
    </div>
</div>