Fix the transition as it would get stuck sometimes

- Reproduction: Open two tabs, one would load, the other one would stay on the transition while the content of the page was ready and animated

.drone.yml

@@ -79,8 +79,7 @@ steps:
         from_secret: ssh_key
       script:
         - cd /data/sites/housesof.world/dev
-        - docker-compose down
+        - docker-compose up -d --force-recreate --remove-orphans
-        - docker-compose up -d --remove-orphans
     when:
       branch:
         - dev

package.json

@@ -45,14 +45,14 @@
     "postcss": "^7.0.27",
     "postcss-load-config": "^2.1.0",
     "postcss-preset-env": "^6.7.0",
-    "rollup": "^2.7.1",
+    "rollup": "^2.7.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-glslify": "^1.2.0",
     "rollup-plugin-svelte": "^5.2.1",
     "rollup-plugin-terser": "^5.3.0",
     "sapper": "^0.27.12",
     "svelte": "^3.20.1",
-    "svelte-preprocess": "^3.7.1"
+    "svelte-preprocess": "^3.7.3"
   },
   "browserslist": [
     "> 0.5%",

pnpm-lock.yaml

@@ -34,7 +34,7 @@ devDependencies:
   rollup-plugin-terser: 5.3.0_rollup@2.7.1
   sapper: 0.27.12_svelte@3.20.1
   svelte: 3.20.1
-  svelte-preprocess: 3.7.2_svelte@3.20.1
+  svelte-preprocess: 3.7.3_480b73828c00a99ece9025e574514fef
 lockfileVersion: 5.1
 packages:
   /@babel/code-frame/7.8.3:
@@ -3604,21 +3604,56 @@ packages:
     dev: false
     resolution:
       integrity: sha512-3MobAvIUe345ZNREDvy/3tsfZMzPcSW+fE7osCVtGOAFeQ25haqQoZhT2c6qxxnWB7oVlTXTHCfEatzAGJi0fQ==
-  /svelte-preprocess/3.7.2_svelte@3.20.1:
+  /svelte-preprocess/3.7.3_480b73828c00a99ece9025e574514fef:
     dependencies:
+      '@babel/core': 7.9.0
       '@types/pug': 2.0.4
       '@types/sass': 1.16.0
       detect-indent: 6.0.0
+      node-sass: 4.13.1
+      postcss: 7.0.27
+      postcss-load-config: 2.1.0
       strip-indent: 3.0.0
       svelte: 3.20.1
     dev: true
     engines:
       node: '>= 7.6.0'
     peerDependencies:
+      '@babel/core': ^7.8.4
+      coffeescript: ^2.5.1
+      less: ^3.10.3
+      node-sass: ^4.13.1
+      postcss: ^7.0.26
+      postcss-load-config: ^2.1.0
+      pug: ^2.0.4
+      sass: ^1.26.3
+      stylus: ^0.54.7
       svelte: ^3.18.1
+      typescript: ^3.7.5
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      coffeescript:
+        optional: true
+      node-sass:
+        optional: true
+      postcss:
+        optional: true
+      postcss-load-config:
+        optional: true
+      pug:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      svelte:
+        optional: true
+      typescript:
+        optional: true
     requiresBuild: true
     resolution:
-      integrity: sha512-VQplwZyw35H80YA3NQVHXcS3E/19odBnwwqvk0NbWGO4KP5cWYtZwb6nBYgJ0J1HZpQ48WXtqzpVZYazc+dYEA==
+      integrity: sha512-Ak2S1osFgu4Gf+4Fqya1zZ3sAcAcjv38RYvt7m0syKQwqd8ITsgsVRWcUysC1MjQMvrDqqTD3slFFnI6C0oOHA==
   /svelte/3.20.1:
     dev: true
     engines:
@@ -3923,5 +3958,5 @@ specifiers:
   sirv: ^0.4.2
   svelte: ^3.20.1
   svelte-lazy: ^0.1.10
-  svelte-preprocess: ^3.7.1
+  svelte-preprocess: ^3.7.3
   swipe-listener: ^1.1.0

src/utils/Transition.svelte

@@ -31,10 +31,10 @@
     page.subscribe(page => {
         // Show transition if page is not excluded
         if (!isExcluded(previousPage) || !isExcluded(page.path)) {
+            // Show transition
+            show = false
+            // Reset pageReady
             pageReady.set(false)
-            process.browser && requestAnimationFrame(() => {
-                show = false
-            })
         }
 
         // Update page for viewer navigation checking
@@ -45,14 +45,14 @@
     pageReady.subscribe(loaded => {
         if (loaded) {
             setTimeout(() => {
-                // Show transition
+                // Hide transition
                 show = true
-                // Run the page animation
+                // Run page animation
-                process.browser && requestAnimationFrame(animateIn)
+                animateIn()
-                // Change loader icon as the loader shown already
-                firstLoad.set(false)
                 // Scroll to page top
                 window.scrollTo(0,0)
+                // Change loader as the init one shown already
+                firstLoad.set(false)
             }, $firstLoad ? animPanelDelay : animPanelShortDelay)
         }
     })