WIP attempt to fix page transitions, Several edits

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