From 28796ee267bdd43fbef5d27db979ad564437a25a Mon Sep 17 00:00:00 2001 From: Jannik Date: Tue, 16 Sep 2025 18:22:48 +0200 Subject: [PATCH] feat: add loading state to view --- src/lib/components/Progressbar.svelte | 75 +++++++++++++++++++ src/lib/components/lnv/Sidebar.svelte | 13 ++-- .../components/lnv/sidebar/InfoSidebar.svelte | 10 ++- .../lnv/sidebar/NearbyPOISidebar.svelte | 9 ++- .../lnv/sidebar/RouteSidebar.svelte | 2 + .../sidebar/settings/LicensesSidebar.svelte | 7 +- src/lib/components/lnv/view.svelte.ts | 3 + 7 files changed, 105 insertions(+), 14 deletions(-) create mode 100644 src/lib/components/Progressbar.svelte diff --git a/src/lib/components/Progressbar.svelte b/src/lib/components/Progressbar.svelte new file mode 100644 index 0000000..4a2637e --- /dev/null +++ b/src/lib/components/Progressbar.svelte @@ -0,0 +1,75 @@ +
+
+
+
+ + diff --git a/src/lib/components/lnv/Sidebar.svelte b/src/lib/components/lnv/Sidebar.svelte index dd26ace..0fcfd0f 100644 --- a/src/lib/components/lnv/Sidebar.svelte +++ b/src/lib/components/lnv/Sidebar.svelte @@ -24,6 +24,7 @@ import LoadingSidebar from "./sidebar/LoadingSidebar.svelte"; import { Tween } from "svelte/motion"; import { quintOut } from "svelte/easing"; + import Progressbar from "../Progressbar.svelte"; const views: Record = { main: "MainSidebar", @@ -134,10 +135,6 @@ return () => value; } - // TODO: implement loading state - // eslint-disable-next-line @typescript-eslint/no-unused-vars - let loading = $state(false); - let searchText = $derived.by(debounce(() => searchbar.text, 300)); let searchResults: Feature[] = $state([]); let mobileView = $derived(window.innerWidth < 768 || routing.currentTrip); @@ -149,10 +146,10 @@ return; } if (searchText.length > 0) { - loading = true; + view.loading = true; search(searchText, 0, 0).then((results) => { searchResults = results; - loading = false; + view.loading = false; view.switch("search", { results: searchResults, query: searchText, @@ -211,6 +208,10 @@ {/if} + {#if view.loading} + + {/if} + {#if routing.currentTrip} {:else} diff --git a/src/lib/components/lnv/sidebar/InfoSidebar.svelte b/src/lib/components/lnv/sidebar/InfoSidebar.svelte index 3a6d5f3..79b32d1 100644 --- a/src/lib/components/lnv/sidebar/InfoSidebar.svelte +++ b/src/lib/components/lnv/sidebar/InfoSidebar.svelte @@ -27,6 +27,7 @@ import InternetAccess from "../info/InternetAccess.svelte"; import RestaurantInfo from "../info/RestaurantInfo.svelte"; import { m } from "$lang/messages"; + import { onMount } from "svelte"; // let { feature }: { feature: Feature } = $props(); @@ -81,9 +82,16 @@ ); }); } + + onMount(() => { + view.loading = true; + }) -{#await fetchPOI(lat, lng, 20)} +{#await fetchPOI(lat, lng, 20).then(r => { + view.loading = false; + return r; +})} { pin.liftPin(); diff --git a/src/lib/components/lnv/sidebar/NearbyPOISidebar.svelte b/src/lib/components/lnv/sidebar/NearbyPOISidebar.svelte index 25a7bf7..505bb31 100644 --- a/src/lib/components/lnv/sidebar/NearbyPOISidebar.svelte +++ b/src/lib/components/lnv/sidebar/NearbyPOISidebar.svelte @@ -4,19 +4,20 @@ import { fetchNearbyPOI, type OverpassElement } from "$lib/services/Overpass"; import { location } from "../location.svelte"; import { map, pin } from "../map.svelte"; + import { view } from "../view.svelte"; import SidebarHeader from "./SidebarHeader.svelte"; let { tags }: { tags?: string } = $props(); let pois: OverpassElement[] = $state([]); - let loading = $state(true); $effect(() => { if (!tags) { - loading = false; + view.loading = false; pois = []; return; } + view.loading = true; fetchNearbyPOI(location.lat, location.lng, tags.split(","), 500).then( (results) => { pois = results.elements.sort((a, b) => { @@ -30,7 +31,7 @@ ); return distA - distB; }); - loading = false; + view.loading = false; }, ); }); @@ -60,7 +61,7 @@ {/if} -{#if loading} +{#if view.loading}
{m.loading()}
{:else}
diff --git a/src/lib/components/lnv/sidebar/RouteSidebar.svelte b/src/lib/components/lnv/sidebar/RouteSidebar.svelte index 7250090..71e3a6b 100644 --- a/src/lib/components/lnv/sidebar/RouteSidebar.svelte +++ b/src/lib/components/lnv/sidebar/RouteSidebar.svelte @@ -69,6 +69,7 @@
diff --git a/src/lib/components/lnv/sidebar/settings/LicensesSidebar.svelte b/src/lib/components/lnv/sidebar/settings/LicensesSidebar.svelte index 7038092..e226178 100644 --- a/src/lib/components/lnv/sidebar/settings/LicensesSidebar.svelte +++ b/src/lib/components/lnv/sidebar/settings/LicensesSidebar.svelte @@ -2,9 +2,9 @@ import { onMount } from "svelte"; import SidebarHeader from "../SidebarHeader.svelte"; import { m } from "$lang/messages"; + import { view } from "../../view.svelte"; let licenses: License[] = $state([]); - let loading = $state(true); interface License { name: string; @@ -20,15 +20,16 @@ } onMount(async () => { + view.loading = true; const res = await fetch("/licenses.json"); licenses = await res.json(); - loading = false; + view.loading = false; }); {m["sidebar.about.licenses"]()} -{#if loading} +{#if view.loading}

Loading...

{:else if licenses.length == 0}

No licenses found.

diff --git a/src/lib/components/lnv/view.svelte.ts b/src/lib/components/lnv/view.svelte.ts index c3764d3..5ab2cc2 100644 --- a/src/lib/components/lnv/view.svelte.ts +++ b/src/lib/components/lnv/view.svelte.ts @@ -6,9 +6,11 @@ export interface View { } export const view = $state({ + loading: false, current: { type: getOnboardingView("main") } as View, history: [] as View[], back: () => { + view.loading = false; if (view.history.length > 0) { view.current = view.history.pop()!; } else { @@ -19,6 +21,7 @@ export const view = $state({ if (view.current.type !== to) { view.history.push(view.current); } + view.loading = false; view.current = { type: to, props } as View; }, });