Feature: add online indicator to special renderings or hide them in case of failure

src/Logic/FeatureSource/Sources/OverpassFeatureSource.ts

@@ -8,7 +8,8 @@ import { Utils } from "../../../Utils"
 import { TagsFilter } from "../../Tags/TagsFilter"
 import { BBox } from "../../BBox"
 import { OsmTags } from "../../../Models/OsmFeature"
-;("use strict")
+
+("use strict")
 
 /**
  * A wrapper around the 'Overpass'-object.
@@ -106,6 +107,9 @@ export default class OverpassFeatureSource implements UpdatableFeatureSource {
      * @private
      */
     public async updateAsync(overrideBounds?: BBox): Promise<void> {
+        if (!navigator.onLine) {
+            return
+        }
         let data: FeatureCollection<Geometry, OsmTags> = undefined
         let lastUsed = 0
         const start = new Date()

src/UI/Base/LoginToggle.svelte

@@ -8,6 +8,7 @@
   import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
   import Invalid from "../../assets/svg/Invalid.svelte"
   import ArrowPath from "@babeard/svelte-heroicons/mini/ArrowPath"
+  import { IsOnline } from "../../Logic/Web/IsOnline"
 
   export let state: {
     osmConnection: OsmConnection
@@ -17,10 +18,6 @@
    * 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
   /**
    * If set and the OSM-api fails, do _not_ show any error messages nor the successful state, just hide.
    * Will still show the "not-logged-in"-slot
@@ -37,14 +34,21 @@
   }
   const apiState: Store<string> =
     state?.osmConnection?.apiIsOnline ?? new ImmutableStore<OsmServiceState>("online")
+  const online = IsOnline.isOnline
 </script>
 
 {#if $badge}
-  {#if !ignoreLoading && !silentFail && $loadingStatus === "loading"}
+  {#if !$online}
+    {#if !hiddenFail}
+      <div class="alert">
+        Your device is offline
+      </div>
+    {/if}
+  {:else if !ignoreLoading && !hiddenFail && $loadingStatus === "loading"}
     <slot name="loading">
       <Loading />
     </slot>
-  {:else if !silentFail && ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline")}
+  {:else if ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline")}
     {#if !hiddenFail}
       <slot name="error">
         <div class="alert flex flex-col items-center">
@@ -61,7 +65,7 @@
     {/if}
   {:else if $loadingStatus === "logged-in"}
     <slot />
-  {:else if !silentFail && $loadingStatus === "not-attempted"}
+  {:else if $loadingStatus === "not-attempted"}
     <slot name="not-logged-in" />
   {/if}
 {/if}

src/UI/BigComponents/MenuDrawerIndex.svelte

@@ -178,7 +178,7 @@
         </Page>
       {/if}
 
-      <LoginToggle {state} silentFail>
+      <LoginToggle {state} hiddenFail>
         {#if state.favourites}
           <Page {onlyLink} shown={pg.favourites}>
             <svelte:fragment slot="header">

src/UI/Image/AttributedImage.svelte

@@ -23,6 +23,7 @@
   import Panorama360 from "../../assets/svg/Panorama360.svelte"
   import { ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { ExclamationTriangle as TriangleOutline } from "@babeard/svelte-heroicons/outline/ExclamationTriangle"
+  import { IsOnline } from "../../Logic/Web/IsOnline"
 
   export let image: Partial<ProvidedImage> & { id: string; url: string }
 
@@ -105,6 +106,7 @@
     state?.geocodedImages.set([f])
   }
 
+  let online = IsOnline.isOnline
   let debug = state?.featureSwitches?.featureSwitchIsDebugging ?? new ImmutableStore(false)
 </script>
 
@@ -133,6 +135,7 @@
   </div>
 </Popup>
 {#if error}
+  {#if $online}
   <div class="interactive flex h-80 w-60 flex-col items-center justify-center p-4 text-center">
     {#if notFound}
       <div class="alert flex items-center">
@@ -156,6 +159,7 @@
       {/if}
     {/if}
   </div>
+  {/if}
 {:else if image.status !== undefined && image.status !== "ready" && image.status !== "hidden"}
   <div class="flex h-80 w-60 flex-col justify-center p-4">
     <Loading>

src/UI/Image/ImageCarousel.svelte

@@ -7,6 +7,7 @@
   import ThemeViewState from "../../Models/ThemeViewState"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import { GeoOperations } from "../../Logic/GeoOperations"
+  import { IsOnline } from "../../Logic/Web/IsOnline"
 
   export let images: Store<ProvidedImage[]>
   export let state: ThemeViewState
@@ -27,10 +28,13 @@
       focus: true,
     },
   }
+  let online = IsOnline.isOnline
 </script>
 
 {#if $estimated > 0 && $images.length < 1}
+  {#if !online}
     <LoadingPlaceholder />
+  {/if}
 {:else}
   <div class="w-full overflow-x-auto" style="scroll-snap-type: x proximity">
     <div class="flex space-x-2">

src/UI/Popup/DeleteFlow/DeleteWizard.svelte

@@ -98,7 +98,7 @@
   }
 </script>
 
-<LoginToggle ignoreLoading={true} {state}>
+<LoginToggle ignoreLoading={true} {state} silentFail>
   {#if $canBeDeleted === false && !hasSoftDeletion}
     <div class="low-interaction subtle flex gap-x-1 rounded p-2 text-sm italic">
       <div class="relative h-fit">

src/UI/Popup/MoveWizard.svelte

@@ -87,7 +87,7 @@
 </script>
 
 {#if moveWizardState.reasons.length > 0}
-  <LoginToggle {state}>
+  <LoginToggle {state} hiddenFail>
     {#if $notAllowed}
       <div class="m-2 flex rounded-lg bg-gray-200 p-2">
         <Move_not_allowed class="m-2 h-8 w-8" />