From b0b20da89b6acf62ea578327b7e46ab08cc152e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 16 Apr 2020 17:40:18 +0200
Subject: [PATCH] WIP performances

---
 src/routes/_layout.svelte    | 10 ++--------
 src/style/layouts/_main.scss |  2 +-
 src/utils/Transition.svelte  |  3 ++-
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index b9d0755..97301db 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -63,7 +63,6 @@
 
 <script>
     import { onMount } from 'svelte'
-    import { fade } from 'svelte/transition'
     import { stores } from '@sapper/app'
     import {
         apiEndpoints,
@@ -109,8 +108,7 @@
 
 
     onMount(async () => {
-        const gaTracker = await import('utils/AnalyticsTracker')
-        AnalyticsTracker = gaTracker.default
+        await import('utils/AnalyticsTracker').then(module => AnalyticsTracker = module.default)
     })
 </script>
 
@@ -122,11 +120,7 @@
     <link rel="canonical" href={`https://${$page.host}${$page.path}`} />
 </svelte:head>
 
-<main class="housesof"
-    class:is-transitioning={!$pageReady}
-    in:fade={{ duration: 600 }}
-    out:fade={{ duration: 600 }}
->
+<main class="housesof" class:is-transitioning={!$pageReady}>
     <slot></slot>
 </main>
 
diff --git a/src/style/layouts/_main.scss b/src/style/layouts/_main.scss
index 2796bbc..743f496 100644
--- 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.4s $ease-quart;
+    transition: opacity 0.6s $ease-quart;
     will-change: opacity;
 
     &.is-transitioning {
diff --git a/src/utils/Transition.svelte b/src/utils/Transition.svelte
index d042c31..4d57617 100644
--- a/src/utils/Transition.svelte
+++ b/src/utils/Transition.svelte
@@ -36,9 +36,10 @@
     })
 </script>
 
+{#if show || !process.browser}
 <slot />
 
-{#if !show && process.browser}
+{:else}
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="transition__loader"
         in:fly={{ y: 32, duration: 1000, easing: quartOut }}