⚠️ Rework completely how transitions works

- Use Svelte/Sapper native if and transitions to show either the page content or the loader, then load each page animationIn
- Code is safe on SSR side, using process.browser on this if
- The <main> element is on position absolute to fade nicely the different pages
- Code cleaning

src/routes/_layout.svelte

@@ -73,14 +73,11 @@
         locations,
         pageReady
     } from 'utils/store'
+    const { page } = stores()
 
     // Components
-    import Transition from 'utils/Transition'
     import AnalyticsTracker from 'utils/AnalyticsTracker'
 
-    // Variables
-    const { page } = stores()
-
 
     /*
     ** Manipulate data
@@ -92,7 +89,9 @@
     $countries.forEach(country => {
         const continent = $continents.find(cont => cont.id === country.continent.id)
         continent.countries = []
-        !continent.countries.includes(country) && continent.countries.push(country)
+        if (!continent.countries.includes(country)) {
+            continent.countries.push(country)
+        }
     })
 
     // Replace each location's country by the database
@@ -107,12 +106,12 @@
     <link rel="canonical" href={`https://${$page.host}${$page.path}`} />
 </svelte:head>
 
-<main class="housesof" style="opacity: { $pageReady ? 1 : 0}">
+<main class="housesof"
+    class:is-transitioning={!$pageReady}
+    in:fade={{ duration: 600 }}
+    out:fade={{ duration: 600 }}
+>
     <slot></slot>
 </main>
 
-{#if process.env.CONFIG.TRANSITION === 'true'}
-<Transition />
-{/if}
-
 <AnalyticsTracker {stores} id={process.env.CONFIG.GA_TRACKER_ID} />