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/animations/place.js
+++ b/src/animations/place.js
@@ -40,8 +40,7 @@ export const animateIn = () => {
    // Illustration
    tl.add({
        targets: '.place__illustration',
-        scale: [1.1, 1],
-        translateX: ['-50%', '-50%'],
+        scale: [1.05, 1],
        translateZ: [0, 0],
        opacity: [0, 1]
    }, 0)
--- a/src/molecules/InteractiveGlobe.svelte
+++ b/src/molecules/InteractiveGlobe.svelte
@@ -22,30 +22,32 @@
    ** Run code when mounted
    */
    onMount(async () => {
-        // Import libraries and code
        let InteractiveGlobe
-        await import('globe/index').then(module => InteractiveGlobe = module.default)
-        // Init the globe from library
-        globe = new InteractiveGlobe({
-            el: scope,
-            texture: `/img/globe/map-${window.innerWidth >= 992 ? '3k' : '2k'}.png`,
-            markers: [...$locations.map(location => {
-                return {
-                    name: location.name,
-                    slug: location.slug,
-                    countryName: location.country.name,
-                    countrySlug: location.country.slug,
-                    lat: location.coordinates.lat,
-                    lng: location.coordinates.lng
-                }
-            })],
-            cameraDistance: 3,
-            onLinkClicked: () => {}
-        })
+        if (process.browser) {
+            // Import libraries and code
+            await import('globe/index').then(module => InteractiveGlobe = module.default)
+            // Init the globe from library
+            globe = new InteractiveGlobe({
+                el: scope,
+                texture: `/img/globe/map-${window.innerWidth >= 992 ? '3k' : '2k'}.png`,
+                markers: [...$locations.map(location => {
+                    return {
+                        name: location.name,
+                        slug: location.slug,
+                        countryName: location.country.name,
+                        countrySlug: location.country.slug,
+                        lat: location.coordinates.lat,
+                        lng: location.coordinates.lng
+                    }
+                })],
+                cameraDistance: 3,
+                onLinkClicked: () => {}
+            })

-        // Run the globe
-        resize()
-        update()
+            // Run the globe
+            resize()
+            update()
+        }
    })
 </script>

--- 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>
--- a/src/style/layouts/_main.scss
+++ b/src/style/layouts/_main.scss
@@ -4,7 +4,7 @@
    top: 0;
    left: 0;
    width: 100%;
-    transition: opacity 0.6s $ease-quart;
+    transition: opacity 0.3s $ease-quart;
    will-change: opacity;

    &.is-transitioning {
--- a/src/style/pages/_place.scss
+++ b/src/style/pages/_place.scss
@@ -165,24 +165,32 @@
        position: absolute;
        z-index: 0;
        top: 0;
-        left: 50%;
+        left: 0;
        width: 100%;
        max-width: 1920px;
        height: 100%;
-        transform: translateX(-50%);
-        transform-origin: 0 0;
-        background-image: var(--url-mobile);
-        background-position: 0 0;
-        background-repeat: no-repeat;
-        background-size: 100% auto;
        will-change: transform, opacity;

-        @include breakpoint (sm) {
-            background-image: var(--url-desktop);
-        }
-        @media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
-            (min-width: $screen-sm) and (min-resolution: 192dpi) {
-            background-image: var(--url-desktop-2x);
+        div {
+            position: relative;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            transform: translateX(-50%);
+            transform-origin: 0 0;
+            background-image: var(--url-mobile);
+            background-position: 0 0;
+            background-repeat: no-repeat;
+            background-size: 100% auto;
+
+            @include breakpoint (sm) {
+                background-image: var(--url-desktop);
+            }
+            @media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
+                (min-width: $screen-sm) and (min-resolution: 192dpi) {
+                background-image: var(--url-desktop-2x);
+            }
        }
+
    }
 }
--- a/src/utils/Transition.svelte
+++ b/src/utils/Transition.svelte
@@ -1,10 +1,16 @@
 <script>
-    import { onMount } from 'svelte'
    import { fly, fade } from 'svelte/transition'
    import { quartInOut, quartOut } from 'svelte/easing'
    import { stores } from '@sapper/app'
-    import { pageReady, firstLoad, animPanelDelay } from 'utils/store'
+    import {
+        pageReady,
+        pageAnimation,
+        animDuration,
+        animDelay,
+        animPanelDelay
+    } from 'utils/store'
    const { page } = stores()
+    $: animateIn = $pageAnimation

    // Animations
    import { panelBackgroundOut } from 'animations/Transition'
@@ -14,46 +20,57 @@
    import IconGlobe from 'atoms/IconGlobe'

    // Props and Variables
-    export let animateIn = (scope) => {}
    let scope
    let show = false
+    let firstLoad = true
+    let previousPage = ''

+    // Check if path is excluded
+    const isExcluded = path => path.includes(['/viewer/'])
+
+    // Listen for route change
+    page.subscribe(page => {
+        // Show transition if page is not excluded
+        if (!isExcluded(previousPage) || !isExcluded(page.path)) {
+            pageReady.set(false)
+            process.browser && requestAnimationFrame(() => show = false)
+        }
+
+        // Update page for viewer navigation checking
+        previousPage = page.path
+    })

    // Listen for when a route is mounted
    pageReady.subscribe(loaded => {
        if (loaded) {
            setTimeout(() => {
-                // Display page content
+                // Show transition
                show = true
-                // Run the page animation / after a tiny delay
-                requestAnimationFrame(() => animateIn(scope))
+                // Run the page animation
+                process.browser && requestAnimationFrame(() => animateIn())
                // Change loader icon as the loader shown already
-                firstLoad.set(false)
+                firstLoad = false
                // Scroll to page top
                window.scrollTo(0,0)
-            }, animPanelDelay)
+            }, firstLoad ? animPanelDelay : 600)
        }
    })
 </script>

-{#if show || !process.browser}
-<slot />
-
-{:else}
+{#if !show}
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
    <div class="transition__loader"
-        in:fly={{ y: 32, duration: 1000, easing: quartOut }}
-        out:fly={{ y: -window.innerHeight/2, duration: 1400, easing: quartInOut }}
+        in:fly={{ y: 24, duration: 800, easing: quartOut }}
+        out:fly={{ y: -window.innerHeight/2, duration: animDuration, easing: quartInOut }}
    >
-        {#if $firstLoad}
+        {#if firstLoad}
        <TitleSite init={true} />
        {:else}
        <IconGlobe width="44" color="#fff" animated="true" />
        {/if}
    </div>
    <div class="transition__background"
-        in:fade={{ duration: 600, easing: quartInOut }}
-        out:panelBackgroundOut={{ duration: 1400 }}
+        out:panelBackgroundOut={{ duration: animDuration }}
    />
 </div>
-{/if}
+{/if}
--- a/src/utils/functions.js
+++ b/src/utils/functions.js
@@ -1,10 +1,11 @@
+
 import { apiEndpoints } from './store'


 /*
 ** Get thumbnail from API
 */
-export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
+export const getThumbnail = (id, width, height, type = 'crop', quality = 80) => {
    const ratio = 1.5
    width = !width ? Math.round(height * ratio) : width
    height = !height ? Math.round(width / ratio) : height
--- a/src/utils/store.js
+++ b/src/utils/store.js
@@ -25,14 +25,14 @@ export let currentPhotos = writable()

 // State
 export let pageReady = writable(false, () => {})
-export let firstLoad = writable(true)
-export let fullscreen = writable()
+export let fullscreen = writable(undefined, () => {})


 /* ==========================================================================
   Animation related
 ========================================================================== */
-export const animDelay = 800
-export const animPanelDelay = 1000
+export let pageAnimation = writable(() => {}, () => {})
+export const animDelay = 900
+export const animPanelDelay = 900
 export const animDuration = 1400
 export const animDurationLong = 1800