🚧 Use PageTransition as a div and switch

- use a page classed div for PageTransition which avoids to make global style for the page
- fix the loading spinner that was too short and would come and go before arriving on the page, now fades out when changing page as pageLoading is defined on the PageTransition afterUpdate

src/components/PageTransition.svelte

@@ -1,18 +1,26 @@
 <script lang="ts">
     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'
 
-    export let name: string
+    let loadingTimeout: ReturnType<typeof setTimeout> | number = null
 
     $: doNotScroll = !$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')
+
+    afterUpdate(() => {
+        // Turn page loading on page mount
+        clearTimeout(loadingTimeout)
+        loadingTimeout = setTimeout(() => $pageLoading = false, DURATION.PAGE_IN)
+    })
 </script>
 
-<main class={name}
+<div class="page"
     in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_DELAY }}
     out:fade={{ duration: DURATION.PAGE_OUT }}
     on:outroend={() => doNotScroll && scrollToTop()}
 >
     <slot />
-</main>
+</div>