Performances optimizations WIP

2020-04-17 14:33:49 +02:00
parent bb5689f0b6
commit 3c05d6d222
17 changed files with 211 additions and 181 deletions
--- a/src/routes/_error.svelte
+++ b/src/routes/_error.svelte
@@ -26,22 +26,24 @@
 </div>
 {/if}

-<section class="page">
-    <div class="wrap">
-        <div class="page__top">
-            <a href="/" class="button-control button-control--pink dir-left">
-                <IconArrow direction="left" color="#fff" class="icon" />
-                <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
-            </a>
+<main class="housesof" class:is-transitioning={!$pageReady}>
+    <section class="page">
+        <div class="wrap">
+            <div class="page__top">
+                <a href="/" class="button-control button-control--pink dir-left">
+                    <IconArrow direction="left" color="#fff" class="icon" />
+                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
+                </a>

-            <TitleSite />
+                <TitleSite />
+            </div>
+
+            <div class="page__description style-description">
+                <p>Oh no… Looks like something wrong just happened. Like a nasty error {status}.</p>
+                <Button href="/" class="button" text="Go back to homepage" />
+            </div>
        </div>

-        <div class="page__description style-description">
-            <p>Oh no… Looks like something wrong just happened. Like a nasty error {status}.</p>
-            <Button href="/" class="button" text="Go back to homepage" />
-        </div>
-    </div>
-
-    <Footer />
-</section>
+        <Footer />
+    </section>
+</main>
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -144,9 +144,7 @@
    {/each}
 </svelte:head>

-<main class="housesof" class:is-transitioning={!$pageReady}>
-    <slot></slot>
-</main>
+<slot></slot>

 <Transition />

--- a/src/routes/choose.svelte
+++ b/src/routes/choose.svelte
@@ -5,7 +5,8 @@
        site,
        currentLocation,
        currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
    } from 'utils/store'
    // Components
    import IconArrow from 'atoms/IconArrow'
@@ -20,6 +21,7 @@

    // Variables
    const { page } = stores()
+    pageAnimation.set(animateIn)

    // Reset current location
    currentLocation.set()
@@ -46,7 +48,7 @@
    />
 </svelte:head>

-<Transition {animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
    <section class="page explore">
        <div class="wrap">
            <div class="page__top">
@@ -69,4 +71,4 @@
    </section>

    <Footer />
-</Transition>
+</main>
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -9,12 +9,12 @@
    import InteractiveGlobe from 'molecules/InteractiveGlobe'
    import Footer from 'organisms/Footer'
    import SocialMetas from 'utils/SocialMetas'
-    import Transition from 'utils/Transition'
    // Animations
    import { animateIn } from 'animations/page'

    // Variables
    const { page } = stores()
+    pageAnimation.set(animateIn)


    /*
@@ -37,7 +37,7 @@
    />
 </svelte:head>

-<Transition {animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
    <section class="page">
        <div class="wrap">
            <div class="page__top">
@@ -80,4 +80,4 @@

        <Footer />
    </section>
-</Transition>
+</main>
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -29,32 +29,29 @@
        site,
        currentLocation,
        currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
    } from 'utils/store'
    import { charsToSpan, smoothScroll } from 'utils/functions'
    // Dependencies
-    import ScrollOut from 'scroll-out'
+    import Lazy from 'svelte-lazy'
    // Components
    import Button from 'atoms/Button'
    import IconGlobeSmall from 'atoms/IconGlobeSmall'
    import IconGlobe from 'atoms/IconGlobe'
-    // import InteractiveGlobe from 'molecules/InteractiveGlobe'
-    // import Carousel from 'organisms/Carousel'
-    // import Fullscreen from 'organisms/Fullscreen'
-    // import Locations from 'organisms/Locations'
+    import InteractiveGlobe from 'molecules/InteractiveGlobe'
+    import Carousel from 'organisms/Carousel'
+    import Fullscreen from 'organisms/Fullscreen'
+    import Locations from 'organisms/Locations'
    import Footer from 'organisms/Footer'
    import SocialMetas from 'utils/SocialMetas'
-    import Transition from 'utils/Transition'
    // Animations
    import { animateIn } from 'animations/index'
+    pageAnimation.set(animateIn)

    // Props and Variables
    export let photos = ''
    const { page } = stores()
-    let Carousel
-    let Fullscreen
-    let InteractiveGlobe
-    let Locations

    // Reset current location if existing
    currentLocation.set()
@@ -64,13 +61,7 @@
    /*
    ** Run code when mounted
    */
-    onMount(async () => {
-        // Load components
-        await import('organisms/Carousel').then(module => Carousel = module.default)
-        await import('organisms/Fullscreen').then(module => Fullscreen = module.default)
-        await import('molecules/InteractiveGlobe').then(module => InteractiveGlobe = module.default)
-        await import('organisms/Locations').then(module => Locations = module.default)
-
+    onMount(() => {
        // Page is loaded
        pageReady.set(true)
    })
@@ -87,7 +78,7 @@
    />
 </svelte:head>

-<Transition animateIn={animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
    <section class="intro">
        <div class="anim-mask">
            <div class="anim title-parallax" id="title-houses">
@@ -108,10 +99,8 @@
        </div>

        <div id="intro-carousel">
-            <!-- <Carousel {photos} locationUrl={true} /> -->
-            <svelte:component this={Carousel} {photos} locationUrl={true} />
-            <!-- <Fullscreen /> -->
-            <svelte:component this={Fullscreen} />
+            <Carousel {photos} locationUrl={true} />
+            <Fullscreen />
        </div>
    </section>

@@ -126,8 +115,11 @@
            <p>{$site.explore_globe}</p>
        </div>

-        <!-- <InteractiveGlobe /> -->
-        <!-- <svelte:component this={InteractiveGlobe} /> -->
+        {#if process.browser}
+        <Lazy offset={window.innerHeight}>
+            <InteractiveGlobe />
+        </Lazy>
+        {/if}

        <div class="anim-mask anim-title">
            <h1 class="title-massive title-parallax" id="title-world" aria-label="World">
@@ -135,9 +127,8 @@
            </h1>
        </div>

-        <!-- <Locations /> -->
-        <svelte:component this={Locations} />
+        <Locations />
    </section>

    <Footer />
-</Transition>
+</main>
--- a/src/routes/location/[country]/[place].svelte
+++ b/src/routes/location/[country]/[place].svelte
@@ -29,7 +29,8 @@
        locations,
        currentLocation,
        currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
    } from 'utils/store'
    import { formatDate, relativeTime, getThumbnail } from 'utils/functions'
    // Components
@@ -49,6 +50,7 @@
    // Props and variables
    export let photos
    const { page } = stores()
+    pageAnimation.set(animateIn)
    let layoutSetting
    let windowWidth

@@ -105,7 +107,7 @@

 <svelte:window bind:innerWidth={windowWidth} />

-<Transition {animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
    <section class="place">
        <div class="place__title">
            <h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
@@ -144,7 +146,7 @@
                    </p>
                    {/if}

-                    {#if photos}
+                    {#if photos.length}
                    <p class="updated style-caps">
                        <strong>Updated</strong>
                        <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -157,11 +159,12 @@
        </div>

        {#if illu_desktop || illu_mobile}
-        <div class="place__illustration"
-            style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
-                   {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
-                   {`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
-        />
+        <div class="place__illustration">
+            <div style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
+                        {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
+                        {`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
+            />
+        </div>
        {/if}
    </section>

@@ -170,7 +173,7 @@
            <aside class="photos__side">
                <Switcher type="switcher--side" />

-                {#if photos}
+                {#if photos.length}
                <p class="updated style-caps">
                    <strong>Updated</strong>
                    <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -198,4 +201,4 @@
    </section>

    <Footer />
-</Transition>
+</main>
--- a/src/routes/viewer/[country]/[place]/[photo].svelte
+++ b/src/routes/viewer/[country]/[place]/[photo].svelte
@@ -36,7 +36,8 @@
        locations,
        currentLocation,
        currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
    } from 'utils/store'
    import { getThumbnail } from 'utils/functions'

@@ -56,6 +57,7 @@

    // Variables
    const { page } = stores()
+    pageAnimation.set(animateIn)
    let windowWidth
    let gotoLink
    let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
@@ -100,7 +102,7 @@

 <svelte:window bind:innerWidth={windowWidth} />

-<Transition {animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
    <section class="viewer">
        <div class="viewer__top">
            <p class="tip">Tap for fullscreen</p>
@@ -120,12 +122,11 @@
            <a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden" sapper-noscroll>&nbsp;</a>
        </div>

-        <Carousel
+        <Carousel {photos}
            viewer="true"
-            photos={photos}
            on:photoChange={photoChanged}
        />

        <Fullscreen />
    </section>
-</Transition>
+</main>