UX: don't hide nearby images if logging in stalls

src/UI/Base/LoginToggle.svelte

@@ -16,6 +16,10 @@
    * If set, 'loading' will act as if we are already logged in.
    */
   export let ignoreLoading: boolean = false
+  /**
+   * Only show the 'successful' state, don't show loading or error messages
+   */
+  export let silentFail : boolean = false
   let loadingStatus = state?.osmConnection?.loadingStatus ?? new ImmutableStore("logged-in")
   let badge = state?.featureSwitches?.featureSwitchEnableLogin ?? new ImmutableStore(true)
   const t = Translations.t.general
@@ -30,11 +34,11 @@
 </script>
 
 {#if $badge}
-  {#if !ignoreLoading && $loadingStatus === "loading"}
+  {#if !ignoreLoading && !silentFail && $loadingStatus === "loading"}
     <slot name="loading">
       <Loading />
     </slot>
-  {:else if $loadingStatus === "error"}
+  {:else if !silentFail && $loadingStatus === "error"}
     <slot name="error">
       <div class="alert max-w-64 flex items-center">
         <Invalid class="m-2 h-8 w-8 shrink-0" />
@@ -43,7 +47,7 @@
     </slot>
   {:else if $loadingStatus === "logged-in"}
     <slot />
-  {:else if $loadingStatus === "not-attempted"}
+  {:else if !silentFail && $loadingStatus === "not-attempted"}
     <slot name="not-logged-in" />
   {/if}
 {/if}

src/UI/Image/LinkableImage.svelte

@@ -13,6 +13,7 @@
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import AttributedImage from "./AttributedImage.svelte"
   import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
+  import LoginToggle from "../Base/LoginToggle.svelte"
 
   export let tags: UIEventSource<OsmTags>
   export let state: SpecialVisualizationState
@@ -68,10 +69,12 @@
       previewedImage={state.previewedImage}
     />
   </div>
+  <LoginToggle {state} silentFail={true} >
   {#if linkable}
     <label>
       <input bind:checked={$isLinked} type="checkbox" />
       <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
     </label>
   {/if}
+  </LoginToggle>
 </div>

src/UI/Image/NearbyImages.svelte

@@ -30,7 +30,7 @@
       lon,
       lat,
       allowSpherical: new UIEventSource<boolean>(false),
-      blacklist: AllImageProviders.LoadImagesFor(tags),
+      blacklist: AllImageProviders.LoadImagesFor(tags)
     },
     state.indexedFeatures
   )
@@ -39,26 +39,24 @@
   let allDone = imagesProvider.allDone
 </script>
 
-<LoginToggle {state}>
+<div class="interactive border-interactive rounded-2xl p-2">
-  <div class="interactive border-interactive rounded-2xl p-2">
+  <div class="flex justify-between">
-    <div class="flex justify-between">
+    <h4>
-      <h4>
+      <Tr t={Translations.t.image.nearby.title} />
-        <Tr t={Translations.t.image.nearby.title} />
+    </h4>
-      </h4>
+    <slot name="corner" />
-      <slot name="corner" />
+  </div>
-    </div>
+  {#if !$allDone}
-    {#if !$allDone}
+    <Loading />
-      <Loading />
+  {:else if $images.length === 0}
-    {:else if $images.length === 0}
+    <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
-      <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
+  {:else}
-    {:else}
+    <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
-      <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
+      {#each $images as image (image.pictureUrl)}
-        {#each $images as image (image.pictureUrl)}
           <span class="w-fit shrink-0" style="scroll-snap-align: start">
             <LinkableImage {tags} {image} {state} {feature} {layer} {linkable} />
           </span>
-        {/each}
+      {/each}
-      </div>
+    </div>
-    {/if}
+  {/if}
-  </div>
+</div>
-</LoginToggle>

src/UI/Image/NearbyImagesCollapsed.svelte

@@ -25,7 +25,6 @@
   let expanded = false
 </script>
 
-<LoginToggle {state}>
   <div class="my-4">
     {#if expanded}
       <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable} {layer}>
@@ -54,4 +53,3 @@
       </button>
     {/if}
   </div>
-</LoginToggle>