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,8 +24,7 @@
 />
 
 
-<PageTransition>
+<main class="shop-page">
-    <main class="shop-page">
     <ShopHeader />
 
     <section class="shop-page__error">
@@ -39,5 +37,4 @@
     </section>
 
     <PostersGrid {posters} />
-    </main>
+</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,8 +24,7 @@
 />
 
 
-<PageTransition>
+<main class="shop-page">
-    <main class="shop-page">
     <ShopHeader {product} />
 
     <PosterLayout
@@ -35,5 +33,4 @@
     />
 
     <PostersGrid {posters} />
-    </main>
+</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,8 +23,7 @@
 />
 
 
-<PageTransition>
+<main class="shop-page">
-    <main class="shop-page">
     <ShopHeader product={data.product} />
 
     <PosterLayout
@@ -34,5 +32,4 @@
     />
 
     <PostersGrid {posters} />
-    </main>
+</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,8 +217,7 @@
 />
 
 
-<PageTransition>
+<main class="location-page">
-    <main class="location-page">
     <section class="location-page__intro grid" bind:this={introEl}>
         <h1 class="title" class:is-short={location.name.length <= 4}>
             <span class="housesof mask">
@@ -362,5 +360,4 @@
             </p>
         </div>
     {/if}
-    </main>
+</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,8 +300,7 @@
 {/if}
 
 
-<PageTransition>
+<main class="photo-page">
-    <main class="photo-page">
     <div class="container grid">
         <p class="photo-page__notice text-label">Tap for fullscreen</p>
 
@@ -401,5 +399,4 @@
             </div>
         </div>
     {/if}
-    </main>
+</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,8 +180,7 @@
 />
 
 
-<PageTransition>
+<main class="about">
-    <main class="about">
     <Banner
         title="About"
         image={{
@@ -398,5 +396,4 @@
             </div>
         </div>
     </section>
-    </main>
+</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,8 +65,7 @@
 />
 
 
-<PageTransition>
+<main class="credits">
-    <main class="credits">
     <Heading
         text={data.credits.text}
     />
@@ -144,5 +142,4 @@
     </section>
 
     <InteractiveGlobe type="cropped" />
-    </main>
+</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,8 +22,7 @@
 />
 
 
-<PageTransition>
+<main class="explore">
-    <main class="explore">
     <Heading {text} />
 
     <section class="explore__locations">
@@ -38,5 +36,4 @@
             <NewsletterModule />
         </div>
     </section>
-    </main>
+</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,8 +335,7 @@
 />
 
 
-<PageTransition>
+<main class="photos-page">
-    <main class="photos-page">
     <section class="photos-page__intro"
         class:is-passed={scrolledPastIntro}
     >
@@ -495,5 +493,4 @@
             </div>
         </div>
     </section>
-    </main>
+</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,8 +64,7 @@
 />
 
 
-<PageTransition>
+<main class="subscribe">
-    <main class="subscribe">
     <div class="subscribe__top">
         <Heading
             text={data.newsletter_page_text}
@@ -94,5 +92,4 @@
     </section>
 
     <InteractiveGlobe type="cropped" />
-    </main>
+</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,8 +21,7 @@
 />
 
 
-<PageTransition>
+<main class="terms">
-    <main class="terms">
     <Heading text="Everything you need to know about using our website or buying our products" />
 
     <section class="terms__categories">
@@ -44,5 +42,4 @@
             </footer>
         </div>
     </section>
-    </main>
+</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,8 +34,7 @@
 />
 
 
-<PageTransition>
+<main class="page-error">
-    <main class="page-error">
     <div class="page-error__top">
         <Heading
             text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}"
@@ -81,5 +79,4 @@
             </div>
         </div>
     </div>
-    </main>
+</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 />
 
-<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}
+        {#if !$page.params.photo}
             <Footer />
-{/if}
+        {/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,8 +80,7 @@
 />
 
 
-<PageTransition>
+<main class="homepage">
-    <main class="homepage">
     <section class="homepage__intro"
         use:reveal={{
             animation: { opacity: [0, 1] },
@@ -165,5 +163,4 @@
             </div>
         </div>
     </div>
-    </main>
+</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,
+}