refactor: use global page transition in main layout

apps/website/src/routes/+layout.svelte

@@ -3,10 +3,13 @@
 
     import { browser } from '$app/environment'
     import { page } from '$app/stores'
-    import { beforeNavigate } from '$app/navigation'
+    import { beforeNavigate, afterNavigate } from '$app/navigation'
     import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public'
-    import { onMount, setContext } from 'svelte'
+    import { setContext, onMount } from 'svelte'
+    import { fade } from 'svelte/transition'
+    import { DELAY, DURATION } from '$utils/constants'
     import { pageLoading, previousPage } from '$utils/stores'
+    import { scrollToTop } from 'utils/scroll'
     import '$utils/polyfills'
     // Components
     import SVGSprite from '$components/SVGSprite.svelte'
@@ -37,9 +40,24 @@
     /**
      * On page change
      */
-    // Store previous page (for photo Viewer close button)
-    beforeNavigate(({ from }) => {
+    beforeNavigate(({ from, to }) => {
+        // Store previous page (for photo Viewer close button)
         $previousPage = from.url.pathname
+
+        // Enable page loading state if URL changed
+        if (from.route.id !== to.route.id) {
+            $pageLoading = true
+        }
+    })
+
+    afterNavigate(() => {
+        // Remove page loading state
+        setTimeout(() => $pageLoading = false, DELAY.PAGE_LOADING)
+
+        // Scroll back to top when new page is ready (excepted certain pages)
+        if (!$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')) {
+            setTimeout(scrollToTop, DELAY.PAGE_IN)
+        }
     })
 
     // Define page loading
@@ -65,11 +83,19 @@
 
 <Switcher />
 
-<slot />
+{#key data.currentPath}
+    <div
+        in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
+        out:fade={{ duration: DURATION.PAGE_OUT }}
+    >
+        <slot />
+
+        {#if !$page.params.photo}
+            <Footer />
+        {/if}
+    </div>
+{/key}
 
-{#if !$page.params.photo}
-    <Footer />
-{/if}
 
 <SVGSprite />
 <SmoothScroll />