WIP attempt to fix page transitions, Several edits

src/routes/_layout.svelte

@@ -70,7 +70,8 @@
         site,
         continents,
         countries,
-        locations
+        locations,
+        pageReady
     } from 'utils/store'
 
     // Components
@@ -106,7 +107,9 @@
     <link rel="canonical" href={`https://${$page.host}${$page.path}`} />
 </svelte:head>
 
-<slot></slot>
+<main class="housesof" style="opacity: { $pageReady ? 1 : 0}">
+    <slot></slot>
+</main>
 
 {#if process.env.CONFIG.TRANSITION === 'true'}
 <Transition />

src/routes/credits.svelte

@@ -75,9 +75,9 @@
             {/each}
         </div>
         {/if}
-
-        <InteractiveGlobe type="part" />
     </div>
 
+    <InteractiveGlobe type="part" />
+
     <Footer />
 </section>

src/routes/index.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <script>
-    import { onMount } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
     import { stores } from '@sapper/app'
     import {
         apiEndpoints,
@@ -56,7 +56,7 @@
     pageTransition.onAnimationEnd = animateIn
 
     // Props and variables
-    export let photos
+    export let photos = ''
     const { page } = stores()
 
     // Reset current location if existing
@@ -106,9 +106,10 @@
     </div>
 
     <div id="intro-carousel">
+        {#if photos}
         <Carousel {photos} />
-
         <Fullscreen />
+        {/if}
     </div>
 </section>
 

src/routes/location/[country]/[place].svelte

@@ -6,7 +6,8 @@
         // Load photos
         const fields = [
             'id', 'name', 'slug', 'date', 'image.private_hash',
-            'location.id', 'location.name', 'location.slug', 'location.region', 'location.country.name', 'location.country.slug',
+            'location.id', 'location.name', 'location.slug', 'location.region',
+            'location.country.name', 'location.country.slug',
             'created_on', 'modified_on'
         ].join(',')
         const sort = ['-created_on', 'name'].join(',')
@@ -58,6 +59,7 @@
 
     // Update current location
     const location = $locations.find(loc => loc.slug === $page.params.place)
+    const { description, country, illustration_desktop, illustration_mobile } = location
     currentLocation.set(location)
     currentPhotos.set(photos)
 
@@ -96,12 +98,12 @@
 </script>
 
 <svelte:head>
-    <title>{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}</title>
-    <meta name="description" content="{$site.seo_name} {location.name} {location.description}">
+    <title>{$site.seo_name} – Beautiful houses of {location.name}, {country.name}</title>
+    <meta name="description" content="{$site.seo_name} {location.name} {description}">
     <SocialMetas
-        url="https://{$page.host}/location/{location.country.slug}/{location.slug}"
-        title="{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}"
-        description="{$site.seo_name} {location.name} {location.description}"
+        url="https://{$page.host}/location/{country.slug}/{location.slug}"
+        title="{$site.seo_name} – Beautiful houses of {location.name}, {country.name}"
+        description="{$site.seo_name} {location.name} {description}"
         image={latestPhoto ? getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}
     />
 </svelte:head>
@@ -135,17 +137,17 @@
             <div class="wrapper">
                 <p>{$site.description}</p>
 
-                {#if location.description}
+                {#if description}
                 <p>
                     Houses Of
                     <LinkChange href="/choose" text={location.name} noScroll="true">
                         <IconGlobeSmall width="14" color="#999" />
                     </LinkChange>
-                    {location.description}
+                    {description}
                 </p>
                 {/if}
 
-                {#if photos.length}
+                {#if photos}
                 <p class="updated style-caps">
                     <strong>Updated</strong>
                     <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -157,9 +159,9 @@
         </div>
     </div>
 
-    {#if location.illustration_desktop && location.illustration_mobile}
+    {#if illustration_desktop && illustration_mobile}
     <div class="place__illustration"
-        style="--url-desktop: url({location.illustration_desktop.full_url}); --url-mobile: url({location.illustration_mobile.full_url});"
+        style="--url-desktop: url({illustration_desktop.full_url}); --url-mobile: url({illustration_mobile.full_url});"
     />
     {/if}
 </section>
@@ -169,7 +171,7 @@
         <aside class="photos__side">
             <Switcher type="switcher--side" />
 
-            {#if photos.length}
+            {#if photos}
             <p class="updated style-caps">
                 <strong>Updated</strong>
                 <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -178,7 +180,7 @@
         </aside>
     </div>
 
-    {#if photos.length}
+    {#if photos}
     <div class="photos__view wrap">
         {#each paginatedPhotos as photo, index}
         <Photo