WIP on performances

src/utils/Transition.svelte

@@ -3,7 +3,7 @@
     import { fly, fade } from 'svelte/transition'
     import { quartInOut, quartOut } from 'svelte/easing'
     import { stores } from '@sapper/app'
-    import { pageReady, firstLoad, animDelayPanel } from 'utils/store'
+    import { pageReady, firstLoad, animPanelDelay } from 'utils/store'
     const { page } = stores()
 
     // Animations
@@ -14,30 +14,31 @@
     import IconGlobe from 'atoms/IconGlobe'
 
     // Props and Variables
-    export let animateIn = scope => {}
+    export let animateIn = (scope) => {}
     let scope
     let show = false
 
 
     // Listen for when a route is mounted
     pageReady.subscribe(loaded => {
-        loaded && setTimeout(() => {
-            // Display page content
-            show = true
-            // Change loader icon as the loader shown already
-            firstLoad.set(false)
-            // Scroll to page top
-            window.scrollTo(0,0)
-            // Run the page animation / after a tiny delay
-            requestAnimationFrame(() => animateIn(scope))
-        }, animDelayPanel)
+        if (loaded) {
+            setTimeout(() => {
+                // Display page content
+                show = true
+                // Run the page animation / after a tiny delay
+                requestAnimationFrame(() => animateIn(scope))
+                // Change loader icon as the loader shown already
+                firstLoad.set(false)
+                // Scroll to page top
+                window.scrollTo(0,0)
+            }, animPanelDelay)
+        }
     })
 </script>
 
-{#if show || !process.browser}
 <slot />
 
-{:else}
+{#if !show && process.browser}
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="transition__loader"
         in:fly={{ y: 32, duration: 1000, easing: quartOut }}

src/utils/store.js

@@ -33,6 +33,6 @@ export let fullscreen = writable()
    Animation related
 ========================================================================== */
 export const animDelay = 800
-export const animDelayPanel = 1000
+export const animPanelDelay = 1000
 export const animDuration = 1400
 export const animDurationLong = 1800