Feature: add avatar with offline support

langs/en.json

@@ -18,6 +18,7 @@
         "allFilteredAway": "No feature in view meets all filters",
         "loadingData": "Loading data…",
         "noData": "There are no relevant features in the current view",
+      "noDataOffline": "No data is loaded and you are offline",
         "ready": "Done!",
         "retrying": "Loading data failed. Trying again in {count} seconds…",
         "zoomIn": "Zoom in to view or edit the data"

src/UI/AllThemesGui.svelte

@@ -204,7 +204,7 @@
       </div>
     </div>
 
-    <LoginToggle {state}>
+    <LoginToggle {state} offline>
       {#if $recentThemes.length > 2}
         <div class="my-4">
           <h2>

src/UI/Base/Avatar.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type UserDetails from "../../Logic/Osm/OsmConnection"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+  import UserCircle from "@rgossiaux/svelte-heroicons/solid/UserCircle"
+  import { IsOnline } from "../../Logic/Web/IsOnline"
+
+  /**
+   * USer icon, if available
+   */
+  export let userdetails: Store<UserDetails>
+
+  let loaded = new UIEventSource(false)
+  let isOnline = IsOnline.isOnline
+</script>
+
+{#if !$userdetails.img || !($loaded || $isOnline)}
+  <UserCircle class="h-14 w-14" color="gray" />
+{:else}
+  <img alt="avatar" src={$userdetails.img} class="h-12 w-12 rounded-full" on:load={() => {loaded.set(true)}} />
+{/if}

src/UI/BigComponents/MenuDrawerIndex.svelte

@@ -63,6 +63,7 @@
   import OfflineManagement from "./OfflineManagement.svelte"
   import { GlobeEuropeAfrica } from "@babeard/svelte-heroicons/solid/GlobeEuropeAfrica"
   import { onDestroy } from "svelte"
+  import Avatar from "../Base/Avatar.svelte"
 
   export let state: {
     favourites: FavouritesFeatureSource
@@ -134,11 +135,7 @@
       <LoginToggle {state} offline>
         <LoginButton osmConnection={state.osmConnection} slot="not-logged-in" />
         <div class="flex items-center gap-x-4 w-full m-2">
-          {#if $userdetails.img}
-            <img alt="avatar" src={$userdetails.img} class="h-12 w-12 rounded-full" />
-            {:else}
-            <UserCircle class="h-14 w-14" color="gray"/>
-          {/if}
+          <Avatar userdetails={state.osmConnection.userDetails} />
           <div class="flex flex-col w-full gap-y-2">
 
             <b>{$userdetails?.name ?? '<Username>'}</b>

src/UI/BigComponents/StateIndicator.svelte

@@ -3,6 +3,7 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import Loading from "../Base/Loading.svelte"
+  import { IsOnline } from "../../Logic/Web/IsOnline"
 
   export let state: ThemeViewState
   /**
@@ -14,6 +15,7 @@
 
   let dataIsLoading = state.dataIsLoading
   let currentState = state.hasDataInView
+  let online = IsOnline.isOnline
   const t = Translations.t.centerMessage
   const showingSearch = state.searchState.showSearchDrawer
 </script>
@@ -34,6 +36,10 @@
       <Tr t={Translations.t.centerMessage.loadingData} />
     </Loading>
   </div>
+{:else if $currentState === "no-data" && !$online}
+  <div class="alert w-fit p-4">
+    <Tr t={t.noDataOffline} />
+  </div>
 {:else if $currentState === "no-data"}
   <div class="alert w-fit p-4">
     <Tr t={t.noData} />

src/UI/BigComponents/WelcomeBack.svelte

@@ -3,6 +3,7 @@
   import { fade } from "svelte/transition"
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
   import { onDestroy } from "svelte"
+  import Avatar from "../Base/Avatar.svelte"
 
   let open = false
   export let state: { osmConnection: OsmConnection }
@@ -28,9 +29,7 @@
 >
   {#if $username !== undefined}
     <div style="width: max-content" class="flex items-center">
-      {#if $userdetails.img}
-        <img src={$userdetails.img} alt="avatar" class="mr-4 h-10 w-10 rounded-full" />
-      {/if}
+      <Avatar {userdetails} />
       <div>
         <div>Welcome back</div>
         <div class="normal-background" style="width: max-content">