Fix location page error and message style

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

@@ -118,24 +118,26 @@
         })
 
         // Photos MutationObserver
-        mutationPhotos = new MutationObserver((mutationsList) => {
+        if (photos.length) {
-            // When adding new childs
+            mutationPhotos = new MutationObserver((mutationsList) => {
-            for (const mutation of mutationsList) {
+                // When adding new childs
-                if (mutation.type === 'childList') {
+                for (const mutation of mutationsList) {
-                    // Observe new items
+                    if (mutation.type === 'childList') {
-                    Array.from(mutation.addedNodes)
+                        // Observe new items
-                        .filter(item => item.nodeType === Node.ELEMENT_NODE)
+                        Array.from(mutation.addedNodes)
-                        .forEach((item: HTMLElement) => observerPhotos.observe(item))
+                            .filter(item => item.nodeType === Node.ELEMENT_NODE)
+                            .forEach((item: HTMLElement) => observerPhotos.observe(item))
+                    }
                 }
-            }
+            })
-        })
+            mutationPhotos.observe(photosListEl, {
-        mutationPhotos.observe(photosListEl, {
+                childList: true,
-            childList: true,
+            })
-        })
 
-        // Observe existing elements
+            // Observe existing elements
-        const existingPhotos = photosListEl.querySelectorAll('.house')
+            const existingPhotos = photosListEl.querySelectorAll('.house')
-        existingPhotos.forEach(el => observerPhotos.observe(el))
+            existingPhotos.forEach(el => observerPhotos.observe(el))
+        }
 
 
         /**
@@ -191,7 +193,7 @@
 <Metas
     title="Houses Of {location.name}"
     description="Discover {totalPhotos} beautiful homes from {location.name}, {location.country.name}"
-    image={getAssetUrlKey(latestPhoto.image.id, 'share-image')}
+    image={latestPhoto ? getAssetUrlKey(latestPhoto.image.id, 'share-image') : null}
 />
 
 <svelte:window bind:scrollY />

src/style/pages/_location.scss

@@ -233,4 +233,18 @@
             }
         }
     }
+
+    // Message
+    &__message {
+        padding: clamp(96px, 24vw, 360px) 0 clamp(96px, 16vw, 280px);
+        text-align: center;
+        color: $color-text;
+        font-size: rem(24px);
+        font-weight: 200;
+        line-height: 1.4;
+
+        @include bp (sm) {
+            font-size: rem(28px);
+        }
+    }
 }