🚧 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
2022-10-09 14:44:25 +02:00
parent 8e6a38381f
commit fd37c36595
23 changed files with 1252 additions and 1246 deletions
--- a/src/components/PageTransition.svelte
+++ b/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>
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -34,7 +34,8 @@
    title="{errors[$page.status].title} – Houses Of"
 />

-<PageTransition name="page-error">
+<PageTransition>
+    <main class="page-error">
        <div class="page-error__top">
            <Heading
                text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}"
@@ -79,4 +80,5 @@
                </div>
            </div>
        </div>
+    </main>
 </PageTransition>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,7 +7,6 @@
    import type { PageData } from './$types'
    import { onMount, setContext } from 'svelte'
    import { pageLoading, previousPage } from '$utils/stores'
-    import { DURATION } from '$utils/contants'
    import '$utils/polyfills'
    import { PUBLIC_ANALYTICS_KEY, PUBLIC_ANALYTICS_URL } from '$env/static/public'
    // Components
@@ -46,14 +45,7 @@

    // Define page loading from navigating store
    navigating.subscribe((store: any) => {
-        if (store) {
-            $pageLoading = true
-
-            // Turn page loading when changing page
-            setTimeout(() => {
-                $pageLoading = false
-            }, DURATION.PAGE_IN * 1.25)
-        }
+        store && ($pageLoading = true)
    })

    onMount(() => {
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -82,7 +82,8 @@
 />
 <!-- image={getAssetUrlKey(settings.seo_image.id, 'share-image')} -->

-<PageTransition name="homepage">
+<PageTransition>
+    <main class="homepage">
        <section class="homepage__intro"
            use:reveal={{
                animation: { opacity: [0, 1] },
@@ -165,4 +166,5 @@
                </div>
            </div>
        </div>
+    </main>
 </PageTransition>
--- a/src/routes/[country]/[location]/+page.svelte
+++ b/src/routes/[country]/[location]/+page.svelte
@@ -218,8 +218,8 @@

 <svelte:window bind:scrollY />

-
-<PageTransition name="location-page">
+<PageTransition>
+    <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,4 +362,5 @@
                </p>
            </div>
        {/if}
+    </main>
 </PageTransition>
--- a/src/routes/[country]/[location]/[photo]/+page.svelte
+++ b/src/routes/[country]/[location]/[photo]/+page.svelte
@@ -305,7 +305,8 @@
 {/if}


-<PageTransition name="photo-page">
+<PageTransition>
+    <main class="photo-page">
        <div class="container grid">
            <p class="photo-page__notice text-label">Tap for fullscreen</p>

@@ -399,4 +400,5 @@
                </div>
            </div>
        {/if}
+    </main>
 </PageTransition>
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -180,8 +180,8 @@
    image={about.seo_image ? getAssetUrlKey(about.seo_image.id, 'share-image') : null}
 />

-
-<PageTransition name="about">
+<PageTransition>
+    <main class="about">
        <Banner
            title="About"
            image={{
@@ -391,4 +391,5 @@
                </div>
            </div>
        </section>
+    </main>
 </PageTransition>
--- a/src/routes/credits/+page.svelte
+++ b/src/routes/credits/+page.svelte
@@ -17,7 +17,7 @@
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'

    export let data: PageData
-    const { credits, credit } = data
+    const { credit } = data


    onMount(() => {
@@ -63,18 +63,18 @@

 <Metas
    title="Credits – Houses Of"
-    description={credits.text}
+    description={data.credits.text}
 />

-
-<PageTransition name="credits">
+<PageTransition>
+    <main class="credits">
        <Heading
-        text={credits.text}
+            text={data.credits.text}
        />

        <section class="credits__list">
            <div class="grid container">
-            {#each credits.list as { title, credits }}
+                {#each data.credits.list as { title, credits }}
                    <div class="credits__category grid">
                        <h2 class="title-small">{title}</h2>
                        <ul>
@@ -144,4 +144,5 @@
        </section>

        <InteractiveGlobe type="cropped" />
+    </main>
 </PageTransition>
--- a/src/routes/locations/+page.svelte
+++ b/src/routes/locations/+page.svelte
@@ -23,7 +23,8 @@
    image=""
 />

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

        <section class="explore__locations">
@@ -37,4 +38,5 @@
                <NewsletterModule />
            </div>
        </section>
+    </main>
 </PageTransition>
--- a/src/routes/photos/+page.svelte
+++ b/src/routes/photos/+page.svelte
@@ -336,7 +336,8 @@
 />


-<PageTransition name="photos-page">
+<PageTransition>
+    <main class="photos-page">
        <section class="photos-page__intro"
            class:is-passed={scrolledPastIntro}
        >
@@ -494,4 +495,5 @@
                </div>
            </div>
        </section>
+    </main>
 </PageTransition>
--- a/src/routes/shop/+error.svelte
+++ b/src/routes/shop/+error.svelte
@@ -25,7 +25,8 @@
 />


-<PageTransition name="shop-page">
+<PageTransition>
+    <main class="shop-page">
        <ShopHeader />

        <section class="shop-page__error">
@@ -38,4 +39,5 @@
        </section>

        <PostersGrid {posters} />
+    </main>
 </PageTransition>
--- a/src/routes/shop/+page.svelte
+++ b/src/routes/shop/+page.svelte
@@ -26,7 +26,8 @@
 />


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

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

        <PostersGrid {posters} />
+    </main>
 </PageTransition>
--- a/src/routes/shop/[type]-[name]/+page.svelte
+++ b/src/routes/shop/[type]-[name]/+page.svelte
@@ -24,7 +24,8 @@
 />


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

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

        <PostersGrid {posters} />
+    </main>
 </PageTransition>
--- a/src/routes/subscribe/+page.svelte
+++ b/src/routes/subscribe/+page.svelte
@@ -65,7 +65,8 @@
    description="Subscribe to the Houses Of newsletter to be notified when new photos or locations are added to the site and when more prints are available on our shop"
 />

-<PageTransition name="subscribe">
+<PageTransition>
+    <main class="subscribe">
        <div class="subscribe__top">
            <Heading
                text={data.newsletter_page_text}
@@ -93,4 +94,5 @@
        </section>

        <InteractiveGlobe type="cropped" />
+    </main>
 </PageTransition>
--- a/src/routes/terms/+page.svelte
+++ b/src/routes/terms/+page.svelte
@@ -23,7 +23,8 @@
 />


-<PageTransition name="terms">
+<PageTransition>
+    <main class="terms">
        <Heading text="Everything you need to know about using our website or buying our products" />

        <section class="terms__categories">
@@ -44,4 +45,5 @@
                </footer>
            </div>
        </section>
+    </main>
 </PageTransition>
--- a/src/style/pages/_about.scss
+++ b/src/style/pages/_about.scss
@@ -1,4 +1,4 @@
-:global(.about) {
+.about {
    :global(.picture) {
        overflow: hidden;
        background: $color-primary-tertiary20;
@@ -9,9 +9,7 @@
            border-radius: 16px;
        }
    }
-}

-.about {
    /*
    ** Introduction
    */
--- a/src/style/pages/_error.scss
+++ b/src/style/pages/_error.scss
@@ -23,9 +23,7 @@
            }
        }
    }
-}

-:global(.page-error) {
    // Globe
    :global(.globe) {
        margin-top: 96px;
--- a/src/style/pages/_explore.scss
+++ b/src/style/pages/_explore.scss
@@ -1,9 +1,10 @@
 // Explore Page
-:global(.explore) {
+.explore {
    overflow: hidden;
-}
-:global(.explore__locations) {
+
+    &__locations {
        @include bp (sm, max) {
            margin-top: 72px;
        }
+    }
 }
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -1,9 +1,7 @@
-:global(.homepage) {
-    overflow: hidden;
-}
-
 // Homepage
 .homepage {
+    overflow: hidden;
+
    // Intro Section
    &__intro {
        padding-bottom: calc(96px + 20vw);
--- a/src/style/pages/_location.scss
+++ b/src/style/pages/_location.scss
@@ -1,9 +1,7 @@
-:global(.location-page) {
-    background: #fff;
-}
-
 // Location Page
 .location-page {
+    background: #fff;
+
    // Intro
    &__intro {
        position: relative;
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -1,35 +1,8 @@
-:global(.shop-page) {
+.shop-page {
    position: relative;
-}

-// Nav
-:global(.shop-location) {
-    --inset: 20px;
-    display: flex;
-    position: fixed;
-    z-index: 20;
-    top: var(--inset);
-    left: var(--inset);
-    right: var(--inset);
-    justify-content: flex-end;
-    transform: translate3d(0, -88px, 0);
-    transition: transform 1s var(--ease-quart);
-    transition-delay: 100ms;
-    pointer-events: none;
-
-    @include bp (sm) {
-        --inset: 32px;
-        justify-content: space-between;
-    }
-}
-    // Visible state
-    :global(.shop-location.is-visible) {
-        transform: translate3d(0,0,0);
-    }
-
-
-// Error
-:global(.shop-page__error) {
+    // Error
+    &__error {
        padding: 64px 0;
        background: $color-cream;
        color: $color-text;
@@ -55,6 +28,33 @@
                margin-bottom: 16px;
            }
        }
+    }
+}
+
+// Nav
+:global(.shop-location) {
+    --inset: 20px;
+    display: flex;
+    position: fixed;
+    z-index: 20;
+    top: var(--inset);
+    left: var(--inset);
+    right: var(--inset);
+    justify-content: flex-end;
+    transform: translate3d(0, -88px, 0);
+    transition: transform 1s var(--ease-quart);
+    transition-delay: 100ms;
+    pointer-events: none;
+
+    @include bp (sm) {
+        --inset: 32px;
+        justify-content: space-between;
+    }
+
+    // Visible state
+    &.is-visible {
+        transform: translate3d(0,0,0);
+    }
 }

 // Notifications
--- a/src/style/pages/_subscribe.scss
+++ b/src/style/pages/_subscribe.scss
@@ -22,12 +22,13 @@

    // Past Issues
    &__issues {
-        margin: 64px auto 0;
+        margin: 64px auto 96px;
        padding: 0 20px;

        @include bp (sm) {
            max-width: 800px;
            margin-top: 0;
+            margin-bottom: 156px;
        }

        // Title
@@ -63,12 +64,3 @@
        }
    }
 }
-
-// Globe
-:global(.subscribe .globe) {
-    margin-top: 96px;
-
-    @include bp (sm) {
-        margin-top: 156px;
-    }
-}
--- a/src/style/pages/_viewer.scss
+++ b/src/style/pages/_viewer.scss
@@ -1,4 +1,4 @@
-:global(.photo-page) {
+.photo-page {
    position: relative;
    width: 100vw;
    height: var(--vh);
@@ -16,7 +16,6 @@
        }
    }

-    .photo-page {
    // Carousel
    &__carousel {
        position: absolute;
@@ -431,7 +430,6 @@
            display: none;
        }
    }
-    }

    // Close button
    :global(.close) {