From f91dcc4290d29b977aa62debe0e84060c035a4d6 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Sun, 13 Aug 2023 11:34:56 +1000
Subject: [PATCH] page switch animations

---
 src/App.module.scss |  1 +
 src/App.svelte      | 14 ++++++++++++--
 src/main.ts         |  1 -
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/App.module.scss b/src/App.module.scss
index 7597303..768b4b8 100644
--- a/src/App.module.scss
+++ b/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 {
diff --git a/src/App.svelte b/src/App.svelte
index c72b0d0..d7bfae3 100644
--- a/src/App.svelte
+++ b/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;
-        navigate(url);
+        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} />
diff --git a/src/main.ts b/src/main.ts
index d076d8e..e263435 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,3 @@
-import "./root.css";
 import App from "./App.svelte";
 import '@fontsource-variable/red-hat-display';