Fix Page transitions and scroll back to top

Might fix all the issues so far!
- start page loading on entering page transition start
- scroll back to top on leaving page transition end

src/components/PageTransition.svelte

@@ -2,25 +2,32 @@
     import { page } from '$app/stores'
     import { afterUpdate } from 'svelte'
     import { fade } from 'svelte/transition'
-    import { pageLoading } from '$utils/stores'
     import { scrollToTop } from '$utils/functions'
-    import { DURATION } from '$utils/contants'
+    import { pageLoading } from '$utils/stores'
+    import { DELAY, DURATION } from '$utils/constants'
 
     let loadingTimeout: ReturnType<typeof setTimeout> | number = null
 
     $: doNotScroll = !$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')
 
+    // Hide page loading indicator on page update
     afterUpdate(() => {
-        // Turn page loading on page mount
         clearTimeout(loadingTimeout)
         loadingTimeout = setTimeout(() => $pageLoading = false, DURATION.PAGE_IN)
     })
 </script>
 
 <div class="page"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_DELAY }}
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
     out:fade={{ duration: DURATION.PAGE_OUT }}
-    on:outroend={() => doNotScroll && scrollToTop()}
+    on:outrostart={() => {
+        // Show page loading indicator
+        $pageLoading = true
+    }}
+    on:outroend={() => {
+        // Scroll back to top
+        doNotScroll && requestAnimationFrame(() => scrollToTop())
+    }}
 >
     <slot />
 </div>

src/routes/+layout.svelte

@@ -2,13 +2,13 @@
     import '../style/global.scss'
 
     import { browser } from '$app/environment'
-    import { navigating, page } from '$app/stores'
+    import { page } from '$app/stores'
     import { beforeNavigate } from '$app/navigation'
+    import { PUBLIC_ANALYTICS_KEY, PUBLIC_ANALYTICS_URL } from '$env/static/public'
     import type { PageData } from './$types'
     import { onMount, setContext } from 'svelte'
     import { pageLoading, previousPage } from '$utils/stores'
     import '$utils/polyfills'
-    import { PUBLIC_ANALYTICS_KEY, PUBLIC_ANALYTICS_URL } from '$env/static/public'
     // Components
     import SVGSprite from '$components/SVGSprite.svelte'
     import SmoothScroll from '$components/SmoothScroll.svelte'
@@ -43,10 +43,6 @@
         $previousPage = from.url.pathname
     })
 
-    // Define page loading from navigating store
-    navigating.subscribe((store: any) => {
-        store && ($pageLoading = true)
-    })
 
     onMount(() => {
         // Avoid FOUC

src/utils/functions/index.ts

@@ -131,7 +131,7 @@ export const scrollToTop = (delay?: number) => {
     if (delay && delay > 0) {
         setTimeout(scroll, delay)
     } else {
-        scroll()
+        return scroll()
     }
 }