🐛 Setup page transitions

Bugged for some reason, the old page stays before the new page loading at the end

src/routes/__layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
     import '../style/style.scss'
-    import { page } from '$app/stores'
-    import { setContext } from 'svelte'
+    import { navigating, page } from '$app/stores'
+    import { onMount, setContext } from 'svelte'
+    import { pageLoading } from '$utils/stores'
+    import { DURATION } from '$utils/contants'
     import '$utils/polyfills'
     // Components
     import SVGSprite from '$components/SVGSprite.svelte'
@@ -16,6 +18,32 @@
         ...data,
         count,
     })
+
+
+    /**
+     * On page change
+     */
+     navigating.subscribe((store: any) => {
+        if (store) {
+            $pageLoading = true
+
+            // Turn page loading when changing page
+            setTimeout(() => {
+                $pageLoading = false
+            }, DURATION.PAGE_IN * 1.25)
+
+            // Scroll back to top between page transitions
+            setTimeout(() => {
+                // scrollToTop()
+                window.scrollTo(0,0)
+            }, DURATION.PAGE_OUT)
+        }
+    })
+
+    onMount(() => {
+        // Avoid FOUC
+        document.body.style.opacity = '1'
+    })
 </script>
 
 <Switcher />
@@ -26,6 +54,10 @@
     <Footer />
 {/if}
 
+{#if $pageLoading}
+    <div class="page-loading" />
+{/if}
+
 <SVGSprite />
 
 <script context="module" lang="ts">