🚧 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

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>

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>

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) {
+        store && ($pageLoading = true)
-            $pageLoading = true
-
-            // Turn page loading when changing page
-            setTimeout(() => {
-                $pageLoading = false
-            }, DURATION.PAGE_IN * 1.25)
-        }
     })
 
     onMount(() => {

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>

src/routes/[country]/[location]/+page.svelte

@@ -218,8 +218,8 @@
 
 <svelte:window bind:scrollY />
 
-
+<PageTransition>
-<PageTransition name="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,4 +362,5 @@
                 </p>
             </div>
         {/if}
+    </main>
 </PageTransition>

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>

src/routes/about/+page.svelte

@@ -180,8 +180,8 @@
     image={about.seo_image ? getAssetUrlKey(about.seo_image.id, 'share-image') : null}
 />
 
-
+<PageTransition>
-<PageTransition name="about">
+    <main class="about">
         <Banner
             title="About"
             image={{
@@ -391,4 +391,5 @@
                 </div>
             </div>
         </section>
+    </main>
 </PageTransition>

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>
-<PageTransition name="credits">
+    <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>

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>

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>

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>

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>

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>

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>

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>

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
     */

src/style/pages/_error.scss

@@ -23,9 +23,7 @@
             }
         }
     }
-}
 
-:global(.page-error) {
     // Globe
     :global(.globe) {
         margin-top: 96px;

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;
         }
     }
+}

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);

src/style/pages/_location.scss

@@ -1,9 +1,7 @@
-:global(.location-page) {
-    background: #fff;
-}
-
 // Location Page
 .location-page {
+    background: #fff;
+
     // Intro
     &__intro {
         position: relative;

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 {
         padding: 64px 0;
         background: $color-cream;
         color: $color-text;
@@ -56,6 +29,33 @@
             }
         }
     }
+}
+
+// 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
 :global(.notifications) {

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;
-    }
-}

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) {