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,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>
-</PageTransition>
+</main>
--- 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,8 +24,7 @@
 />


-<PageTransition>
-    <main class="shop-page">
+<main class="shop-page">
    <ShopHeader {product} />

    <PosterLayout
@@ -35,5 +33,4 @@
    />

    <PostersGrid {posters} />
-    </main>
-</PageTransition>
+</main>
--- 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,8 +23,7 @@
 />


-<PageTransition>
-    <main class="shop-page">
+<main class="shop-page">
    <ShopHeader product={data.product} />

    <PosterLayout
@@ -34,5 +32,4 @@
    />

    <PostersGrid {posters} />
-    </main>
-</PageTransition>
+</main>
--- 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,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>
-</PageTransition>
+</main>
--- 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,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>
-</PageTransition>
+</main>
--- 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,8 +180,7 @@
 />


-<PageTransition>
-    <main class="about">
+<main class="about">
    <Banner
        title="About"
        image={{
@@ -398,5 +396,4 @@
            </div>
        </div>
    </section>
-    </main>
-</PageTransition>
+</main>
--- 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,8 +65,7 @@
 />


-<PageTransition>
-    <main class="credits">
+<main class="credits">
    <Heading
        text={data.credits.text}
    />
@@ -144,5 +142,4 @@
    </section>

    <InteractiveGlobe type="cropped" />
-    </main>
-</PageTransition>
+</main>
--- 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,8 +22,7 @@
 />


-<PageTransition>
-    <main class="explore">
+<main class="explore">
    <Heading {text} />

    <section class="explore__locations">
@@ -38,5 +36,4 @@
            <NewsletterModule />
        </div>
    </section>
-    </main>
-</PageTransition>
+</main>
--- 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,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>
-</PageTransition>
+</main>
--- 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,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>
-</PageTransition>
+</main>
--- 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,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>
-</PageTransition>
+</main>
--- 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,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>
-</PageTransition>
+</main>
--- 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 />

-<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 />
--- 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,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>
-</PageTransition>
+</main>
--- 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,
+}