Performances optimizations WIP

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}

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

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