WIP Animations all over site

- Run a transition In for each page
- Involve a "loader" panel on page change
- TODO: tweak the animations and finish the concept

src/routes/_layout.svelte

@@ -1,11 +1,5 @@
 <script context="module">
-    import {
-        apiEndpoints,
-        site,
-        continents,
-        countries,
-        locations
-    } from '../utils/store'
+    import { apiEndpoints, } from '../utils/store'
 
     export async function preload (page, session) {
         const req = await this.fetch(apiEndpoints.gql, {
@@ -66,11 +60,27 @@
 </script>
 
 <script>
-    // Manipulate countries data
+    import { onMount } from 'svelte'
+    import {
+        site,
+        continents,
+        countries,
+        locations
+    } from '../utils/store'
+
+    // Components
+    import Transition from '../utils/Transition'
+
+    // Props
+    export const segment = null
+
+
+    /*
+    ** Manipulate data
+    */
     // Replace each countrie's continent by the database
     $countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
 
-    // Manipulate continents data
     // Push each country to its continent
     $countries.forEach(country => {
         const continent = $continents.find(cont => cont.id === country.continent.id)
@@ -78,13 +88,15 @@
         !continent.countries.includes(country) && continent.countries.push(country)
     })
 
-    // Manipulate locations data
     // Replace each location's country by the database
     $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
 </script>
 
+
 <style lang="scss" global>
     @import "../style/style.scss";
 </style>
 
 <slot></slot>
+
+<Transition />