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

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="flex justify-between">
-      <h4>
-        <Tr t={Translations.t.image.nearby.title} />
-      </h4>
-      <slot name="corner" />
-    </div>
-    {#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)}
+<div class="interactive border-interactive rounded-2xl p-2">
+  <div class="flex justify-between">
+    <h4>
+      <Tr t={Translations.t.image.nearby.title} />
+    </h4>
+    <slot name="corner" />
+  </div>
+  {#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)}
           <span class="w-fit shrink-0" style="scroll-snap-align: start">
             <LinkableImage {tags} {image} {state} {feature} {layer} {linkable} />
           </span>
-        {/each}
-      </div>
-    {/if}
-  </div>
-</LoginToggle>
+      {/each}
+    </div>
+  {/if}
+</div>

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>