From e1ec29651c5f7cc1ae3fa29bc65eea0c608ef4ac Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sun, 3 Dec 2023 03:52:37 +0100
Subject: [PATCH] UX: show 'no nearby images' if no images are shown, fix #1727

---
 langs/en.json                    | 1 +
 src/UI/Popup/NearbyImages.svelte | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/langs/en.json b/langs/en.json
index 51286265dd..2a9968421a 100644
--- a/langs/en.json
+++ b/langs/en.json
@@ -419,6 +419,7 @@
         "isDeleted": "Deleted",
         "nearby": {
             "link": "This picture shows the object",
+            "noNearbyImages": "No nearby images were found",
             "seeNearby": "Browse and link nearby pictures",
             "title": "Nearby streetview imagery"
         },
diff --git a/src/UI/Popup/NearbyImages.svelte b/src/UI/Popup/NearbyImages.svelte
index c5b14927cc..5f7192862d 100644
--- a/src/UI/Popup/NearbyImages.svelte
+++ b/src/UI/Popup/NearbyImages.svelte
@@ -35,6 +35,7 @@
   )
 
   let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
+  let allDone = imagesProvider.allDone
 </script>
 
 <div class="interactive border-interactive rounded-2xl p-2">
@@ -44,8 +45,10 @@
     </h4>
     <slot name="corner" />
   </div>
-  {#if $images.length === 0}
+  {#if !$allDone}
     <Loading />
+  {:else if $images.length === 0}
+    <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert"/>
   {:else}
     <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
       {#each $images as image (image.pictureUrl)}