refactor: use global page transition in main layout

apps/website/src/components/PageTransition.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores'
-    import { afterUpdate } from 'svelte'
-    import { fade } from 'svelte/transition'
-    import { scrollToTop } from 'utils/scroll'
-    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(() => {
-        clearTimeout(loadingTimeout)
-        loadingTimeout = setTimeout(() => $pageLoading = false, DURATION.PAGE_IN)
-    })
-</script>
-
-<div class="page"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
-    on:outrostart={() => {
-        // Show page loading indicator
-        $pageLoading = true
-    }}
-    on:outroend={() => {
-        // Scroll back to top
-        doNotScroll && requestAnimationFrame(() => scrollToTop())
-    }}
->
-    <slot />
-</div>

apps/website/src/routes/(shop)/shop/+error.svelte

@@ -3,7 +3,6 @@
     import { page } from '$app/stores'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import ShopHeader from '$components/organisms/ShopBanner.svelte'
     import PostersGrid from '$components/organisms/PostersGrid.svelte'
 
@@ -25,7 +24,6 @@
 />
 
 
-<PageTransition>
 <main class="shop-page">
     <ShopHeader />
 
@@ -40,4 +38,3 @@
 
     <PostersGrid {posters} />
 </main>
-</PageTransition>

apps/website/src/routes/(shop)/shop/+page.svelte

@@ -3,7 +3,6 @@
     import { getAssetUrlKey } from '$utils/api'
     import { shopCurrentProductSlug } from '$utils/stores/shop'
     // Components
-    import PageTransition from '$components/PageTransition.svelte'
     import Metas from '$components/Metas.svelte'
     import PostersGrid from '$components/organisms/PostersGrid.svelte'
     import ShopHeader from '$components/organisms/ShopBanner.svelte'
@@ -25,7 +24,6 @@
 />
 
 
-<PageTransition>
 <main class="shop-page">
     <ShopHeader {product} />
 
@@ -36,4 +34,3 @@
 
     <PostersGrid {posters} />
 </main>
-</PageTransition>

apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte

@@ -4,7 +4,6 @@
     import { shopCurrentProductSlug } from '$utils/stores/shop'
     import { capitalizeFirstLetter } from 'utils/string'
     // Components
-    import PageTransition from '$components/PageTransition.svelte'
     import Metas from '$components/Metas.svelte'
     import ShopHeader from '$components/organisms/ShopBanner.svelte'
     import PostersGrid from '$components/organisms/PostersGrid.svelte'
@@ -24,7 +23,6 @@
 />
 
 
-<PageTransition>
 <main class="shop-page">
     <ShopHeader product={data.product} />
 
@@ -35,4 +33,3 @@
 
     <PostersGrid {posters} />
 </main>
-</PageTransition>

apps/website/src/routes/(site)/[country]/[location]/+page.svelte

@@ -16,7 +16,6 @@
     import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import Image from '$components/atoms/Image.svelte'
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -218,7 +217,6 @@
 />
 
 
-<PageTransition>
 <main class="location-page">
     <section class="location-page__intro grid" bind:this={introEl}>
         <h1 class="title" class:is-short={location.name.length <= 4}>
@@ -363,4 +361,3 @@
         </div>
     {/if}
 </main>
-</PageTransition>

apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte

@@ -19,7 +19,6 @@
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import Image from '$components/atoms/Image.svelte'
     import Icon from '$components/atoms/Icon.svelte'
     import IconArrow from '$components/atoms/IconArrow.svelte'
@@ -301,7 +300,6 @@
 {/if}
 
 
-<PageTransition>
 <main class="photo-page">
     <div class="container grid">
         <p class="photo-page__notice text-label">Tap for fullscreen</p>
@@ -402,4 +400,3 @@
         </div>
     {/if}
 </main>
-</PageTransition>

apps/website/src/routes/(site)/about/+page.svelte

@@ -16,7 +16,6 @@
     import { quartOut } from '$animations/easings'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import Image from '$components/atoms/Image.svelte'
     import Button from '$components/atoms/Button.svelte'
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
@@ -181,7 +180,6 @@
 />
 
 
-<PageTransition>
 <main class="about">
     <Banner
         title="About"
@@ -399,4 +397,3 @@
         </div>
     </section>
 </main>
-</PageTransition>

apps/website/src/routes/(site)/credits/+page.svelte

@@ -10,7 +10,6 @@
     import { quartOut } from 'svelte/easing'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import Image from '$components/atoms/Image.svelte'
     import Heading from '$components/molecules/Heading.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -66,7 +65,6 @@
 />
 
 
-<PageTransition>
 <main class="credits">
     <Heading
         text={data.credits.text}
@@ -145,4 +143,3 @@
 
     <InteractiveGlobe type="cropped" />
 </main>
-</PageTransition>

apps/website/src/routes/(site)/locations/+page.svelte

@@ -6,7 +6,6 @@
     import { getContext } from 'svelte'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
     import Locations from '$components/organisms/Locations.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
@@ -23,7 +22,6 @@
 />
 
 
-<PageTransition>
 <main class="explore">
     <Heading {text} />
 
@@ -39,4 +37,3 @@
         </div>
     </section>
 </main>
-</PageTransition>

apps/website/src/routes/(site)/photos/+page.svelte

@@ -19,7 +19,6 @@
     import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import SplitText from '$components/SplitText.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
     import Button from '$components/atoms/Button.svelte'
@@ -336,7 +335,6 @@
 />
 
 
-<PageTransition>
 <main class="photos-page">
     <section class="photos-page__intro"
         class:is-passed={scrolledPastIntro}
@@ -496,4 +494,3 @@
         </div>
     </section>
 </main>
-</PageTransition>

apps/website/src/routes/(site)/subscribe/+page.svelte

@@ -10,7 +10,6 @@
     import { quartOut } from '$animations/easings'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import Heading from '$components/molecules/Heading.svelte'
     import EmailForm from '$components/molecules/EmailForm.svelte'
     import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
@@ -65,7 +64,6 @@
 />
 
 
-<PageTransition>
 <main class="subscribe">
     <div class="subscribe__top">
         <Heading
@@ -95,4 +93,3 @@
 
     <InteractiveGlobe type="cropped" />
 </main>
-</PageTransition>

apps/website/src/routes/(site)/terms/+page.svelte

@@ -6,7 +6,6 @@
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime'
     // Components
-    import PageTransition from '$components/PageTransition.svelte'
     import Metas from '$components/Metas.svelte'
     import Heading from '$components/molecules/Heading.svelte'
 
@@ -22,7 +21,6 @@
 />
 
 
-<PageTransition>
 <main class="terms">
     <Heading text="Everything you need to know about using our website or buying our products" />
 
@@ -45,4 +43,3 @@
         </div>
     </section>
 </main>
-</PageTransition>

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

@@ -7,7 +7,6 @@
     import { page } from '$app/stores'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
     import Heading from '$components/molecules/Heading.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -35,7 +34,6 @@
 />
 
 
-<PageTransition>
 <main class="page-error">
     <div class="page-error__top">
         <Heading
@@ -82,4 +80,3 @@
         </div>
     </div>
 </main>
-</PageTransition>

apps/website/src/routes/+layout.server.ts

@@ -96,6 +96,7 @@ export const load = async ({ url }) => {
                     locations: countLocations[0].count.id,
                     countries: countCountries[0].count.id,
                 },
+                currentPath: url.pathname,
             }
         }
     } catch (err) {

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
      */
+    beforeNavigate(({ from, to }) => {
         // Store previous page (for photo Viewer close button)
-    beforeNavigate(({ from }) => {
         $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 />
 
+{#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}
+
 
 <SVGSprite />
 <SmoothScroll />

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

@@ -13,7 +13,6 @@
     import { quartOut } from '$animations/easings'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
     import SplitText from '$components/SplitText.svelte'
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -81,7 +80,6 @@
 />
 
 
-<PageTransition>
 <main class="homepage">
     <section class="homepage__intro"
         use:reveal={{
@@ -166,4 +164,3 @@
         </div>
     </div>
 </main>
-</PageTransition>

apps/website/src/utils/constants.ts

@@ -1,10 +1,11 @@
-// Delays
-export const DELAY = {
-    PAGE_LOADING: 600,
-}
-
 // Durations
 export const DURATION = {
     PAGE_IN: 400,
     PAGE_OUT: 400,
 }
+
+// Delays
+export const DELAY = {
+    PAGE_LOADING: 600,
+    PAGE_IN: DURATION.PAGE_OUT + 1,
+}