Performances optimizations WIP

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

@@ -29,7 +29,8 @@
         locations,
         currentLocation,
         currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
     } from 'utils/store'
     import { formatDate, relativeTime, getThumbnail } from 'utils/functions'
     // Components
@@ -49,6 +50,7 @@
     // Props and variables
     export let photos
     const { page } = stores()
+    pageAnimation.set(animateIn)
     let layoutSetting
     let windowWidth
 
@@ -105,7 +107,7 @@
 
 <svelte:window bind:innerWidth={windowWidth} />
 
-<Transition {animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
     <section class="place">
         <div class="place__title">
             <h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
@@ -144,7 +146,7 @@
                     </p>
                     {/if}
 
-                    {#if photos}
+                    {#if photos.length}
                     <p class="updated style-caps">
                         <strong>Updated</strong>
                         <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -157,11 +159,12 @@
         </div>
 
         {#if illu_desktop || illu_mobile}
-        <div class="place__illustration"
-            style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
-                   {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
-                   {`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
-        />
+        <div class="place__illustration">
+            <div style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
+                        {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
+                        {`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
+            />
+        </div>
         {/if}
     </section>
 
@@ -170,7 +173,7 @@
             <aside class="photos__side">
                 <Switcher type="switcher--side" />
 
-                {#if photos}
+                {#if photos.length}
                 <p class="updated style-caps">
                     <strong>Updated</strong>
                     <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -198,4 +201,4 @@
     </section>
 
     <Footer />
-</Transition>
+</main>