⚠️ 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/choose.svelte

@@ -5,8 +5,7 @@
         site,
         currentLocation,
         currentPhotos,
-        pageReady,
-        pageTransition
+        pageReady
     } from 'utils/store'
 
     // Components
@@ -15,11 +14,11 @@
     import Globe from 'molecules/InteractiveGlobe'
     import Locations from 'organisms/Locations'
     import Footer from 'organisms/Footer'
+    import Transition from 'utils/Transition'
     import SocialMetas from 'utils/SocialMetas'
 
     // Animations
     import { animateIn } from 'animations/page'
-    pageTransition.onAnimationEnd = animateIn
 
     // Variables
     const { page } = stores()
@@ -52,25 +51,27 @@
     />
 </svelte:head>
 
-<section class="page explore">
-    <div class="wrap">
-        <div class="page__top">
-            <a href="/" class="button-control button-control--pink dir-left" rel="prefetch">
-                <IconArrow direction="left" color="#fff" class="icon" />
-                <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
-            </a>
+<Transition {animateIn}>
+    <section class="page explore">
+        <div class="wrap">
+            <div class="page__top">
+                <a href="/" class="button-control button-control--pink dir-left" rel="prefetch">
+                    <IconArrow direction="left" color="#fff" class="icon" />
+                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
+                </a>
 
-            <TitleSite />
+                <TitleSite />
+            </div>
+
+            <div class="page__description page__part style-description">
+                <p>{$site.explore_globe}</p>
+            </div>
         </div>
 
-        <div class="page__description page__part style-description">
-            <p>{$site.explore_globe}</p>
-        </div>
-    </div>
+        <Globe />
 
-    <Globe />
+        <Locations />
+    </section>
 
-    <Locations />
-</section>
-
-<Footer />
+    <Footer />
+</Transition>