WIP attempt to fix page transitions, Several edits

src/utils/Transition.svelte

@@ -1,6 +1,12 @@
 <script>
     import { stores } from '@sapper/app'
-    import { pageReady, animDurationLong, pageTransition } from './store'
+    import {
+        pageReady,
+        pageTransition,
+        transitionLong,
+        transitionPanelIn,
+        transitionDelay
+    } from './store'
     const { page } = stores()
 
     // Components
@@ -11,6 +17,9 @@
     import { animateIn, animateOut } from 'animations/Transition'
 
 
+    // Check if path is excluded
+    const isExcluded = path => path.includes(['/viewer/'])
+
     /*
     ** PAGE LOADING PROCESS
     ** 1. Set pageReady to false
@@ -24,21 +33,16 @@
     let firstLoad = true
     let previousPage = ''
 
-    // Check if viewer
-    const isExcluded = path => path.includes(['/viewer/'])
-
     // 1. Watch page change
     page.subscribe(page => {
         // Run transition if page is not excluded
         if (!isExcluded(previousPage) || !isExcluded(page.path)) {
-            // Run the loader animation (only after first load)
+            // Run the loader animation (first load only)
             if (!firstLoad) {
                 animateIn(scope)
             }
 
-            // TODO: Figure out how to delay the page rendering a little bit before the end of the transition panel ending
-
-            // Set pageReady to false (?)
+            // Reset pageReady when changing page
             pageReady.set(false)
         }
 
@@ -49,19 +53,13 @@
     // 2. Watch when loaded changes
     pageReady.subscribe(loaded => {
         if (loaded) {
-            // 3. Hide the loader
-            setTimeout(() => {
-                // Also sets firstLoad to false in order to show the second icon afterwards
-                animateOut(scope, () => firstLoad = false)
-            }, 400) // This duration allows to not come over the transition In
-            // [OU ALORS] les pages changent la valeur de loaded plus tard
+            // 3. Hide the loader and set firstLoad to false (in order to show the second icon afterwards)
+            animateOut(scope, () => firstLoad = false)
 
             // Scroll back to top of page
-            setTimeout(() => {
-                window.scrollTo(0,0)
-            }, animDurationLong * 0.75 + 400)
+            setTimeout(() => window.scrollTo(0,0), transitionDelay)
 
-            // 4. Run the page's transition in, but a little bit before the end of the loader
+            // 4. Run page entering animation
             pageTransition.onAnimationEnd()
         }
     })
@@ -70,7 +68,7 @@
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="transition__loader">
         {#if firstLoad}
-        <TitleSite />
+        <TitleSite init="true" />
 
         {:else}
         <IconGlobe width="44" color="#fff" animated="true" />