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>