page switch animations

src/App.module.scss

@@ -11,6 +11,7 @@ body, html {
   top: 0; left: 0;
   border-radius: 16px;
   z-index: 0;
+  transition: 500ms ease;
 }
 
 @keyframes delay-show-fade-in {

src/App.svelte

@@ -11,9 +11,19 @@
     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' })
 
@@ -23,7 +33,7 @@
 <Titlebar />
 <Background />
 
-<div class={style.backdrop}>
+<div class={style.backdrop} style={`opacity:${page_faded ? 0 : 1}`}>
     <div class={style['delay-show']}>
         <Router {url}>
             <Route path='/' component={Home} />

src/main.ts

@@ -1,4 +1,3 @@
-import "./root.css";
 import App from "./App.svelte";
 import '@fontsource-variable/red-hat-display';