@import url("/assets/md.css")refactor: Extract Loader HEADmaster

@import url("/assets/md.css")

2 files changed, 38 insertions, 16 deletions

diff --git a/src/lib/Loader.svelte b/src/lib/Loader.svelte
new file mode 100644
index 0000000..a264f41
--- /dev/null
+++ b/src/lib/Loader.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  let {
+    kind,
+    percent,
+  }: {
+    kind: 'active' | 'blank' | 'hidden';
+    percent?: number | null | undefined;
+  } = $props();
+</script>
+
+{#if kind === 'active' && (percent === undefined || percent === null)}
+  <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 kind === 'active'}
+  <div
+    class="h-[2px] rounded-[2px] bg-white/20 transition-[all_100ms]"
+    style="width:{Math.min(percent!, 100)}%"
+  ></div>
+{:else if kind === 'blank' || kind === 'hidden'}
+  <div
+    class={{
+      'h-[2px] w-full rounded-[2px]': true,
+      'bg-white/20': kind === 'blank',
+    }}
+  ></div>
+{/if}
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%]">