refactor: use global page transition in main layout

2023-05-26 23:49:23 +02:00
parent 685d4fd244
commit d991dad294
17 changed files with 864 additions and 908 deletions
--- a/apps/website/src/components/PageTransition.svelte
+++ b/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>
--- a/apps/website/src/routes/(shop)/shop/+error.svelte
+++ b/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>
--- a/apps/website/src/routes/(shop)/shop/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/(site)/about/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/(site)/credits/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/(site)/locations/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/(site)/photos/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/(site)/subscribe/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/(site)/terms/+page.svelte
+++ b/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>
--- a/apps/website/src/routes/+error.svelte
+++ b/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>
--- a/apps/website/src/routes/+layout.server.ts
+++ b/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) {
--- a/apps/website/src/routes/+layout.svelte
+++ b/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 />
--- a/apps/website/src/routes/+page.svelte
+++ b/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>
--- a/apps/website/src/utils/constants.ts
+++ b/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,
+}