From 807e1cd0f63eb987b714be9cd72020b5eb4ba4ee Mon Sep 17 00:00:00 2001
From: 7222e800-c703-472d-a787-71b6b5cba4ef <mem@estrogen.zone>
Date: Sun, 14 Sep 2025 17:23:45 +0000
Subject: refactor: Extract Loader

---
 src/routes/(app)/fahrplan/+page.svelte | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/(app)/fahrplan/+page.svelte b/src/routes/(app)/fahrplan/+page.svelte
index 7584530..4919628 100644
--- a/src/routes/(app)/fahrplan/+page.svelte
+++ b/src/routes/(app)/fahrplan/+page.svelte
@@ -15,6 +15,7 @@
     normalisePlaceName,
     placeNameMap,
   } from '$lib/aliases';
+  import Loader from '$lib/Loader.svelte';
 
   let searchQuery = $state('');
   let searchSuggestionIdx = $state(0);
@@ -183,8 +184,9 @@
             const json = await motis.getStationTimetable(
               objectId,
               resultsLoopCancel.signal,
-              isArrivals
-              // 500,
+              isArrivals,
+              undefined,
+              page.url.searchParams.get('radius') ?? undefined
               // new Date('2025-07-26T00:03:11Z')
             );
             hasQueriedResults = true;
@@ -455,20 +457,12 @@
       </div>
     </Titlebar>
     <div class="w-full h-[2px] rounded-[2px] relative">
-      {#if progressKind === 'fetch'}
-        <div
-          class="h-[2px] rounded-[2px] bg-white/50 w-full left-0 absolute"
-          style="animation:loadingbar infinite;animation-play-state:playing;animation-duration:2s;animation-timing-function:ease-in-out;"
-        ></div>
-      {:else if progressKind === 'waiting'}
-        <div
-          class="h-[2px] rounded-[2px] bg-white/20 transition-[all_100ms]"
-          style="width:{Math.min(
-            ((now - lastFetchAt) * 100) / fetchDelay,
-            100
-          )}%"
-        ></div>
-      {/if}
+      <Loader
+        kind="active"
+        percent={progressKind === 'waiting'
+          ? undefined
+          : ((now - lastFetchAt) * 100) / fetchDelay}
+      />
     </div>
     <div class="p-3">
       <div class="flex flex-col gap-2 max-w-[100%]">
-- 
cgit v1.2.3