Add rotating reload icon

src/lib/cards/Card.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { fade } from "svelte/transition";
     import type { CardConfig } from "./Card.types";
-    import { IconHelpCircle, IconRefresh } from "@tabler/icons-svelte";
+    import { IconHelpCircle, IconReload } from "@tabler/icons-svelte";
     import Tooltip from "$lib/Tooltip.svelte";
 
     export let config: CardConfig;
@@ -19,8 +19,8 @@
                 </Tooltip>
             {/if}
             {#if config.showRefresh}
-                <button on:click={config.onRefresh} aria-label="Refresh">
-                    <IconRefresh />
+                <button class:refreshing={config.refreshing} on:click={config.onRefresh} aria-label="Refresh">
+                    <IconReload />
                 </button>
             {/if}
         </div>
@@ -67,6 +67,10 @@
         gap: 0px;
     }
 
+    .refreshing {
+        animation: spin 1s linear infinite;
+    }
+
     .content {
         margin-top: 5px;
     }
@@ -82,4 +86,13 @@
     button:hover {
         color: var(--island-header-color);
     }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
 </style>

src/lib/cards/Card.types.ts

@@ -4,6 +4,7 @@ export interface CardConfig {
     showRefresh: boolean;
     helpText: string;
     onRefresh: () => void;
+    refreshing: boolean;
 }
 
 export interface LookupCardConfig {

src/lib/cards/LookupCard.svelte

@@ -10,6 +10,7 @@
         showRefresh: false,
         helpText: config.helpText,
         onRefresh: () => {},
+        refreshing: false,
     };
 </script>
 

src/lib/cards/NearToMeCard.svelte

@@ -19,6 +19,7 @@
         showRefresh: true,
         helpText: "Your location may not be accurate on desktop and laptop devices.",
         onRefresh: refresh,
+        refreshing: false,
     };
 
     function turnOnLocation() {
@@ -28,6 +29,7 @@
     }
 
     function refresh() {
+        config.refreshing = true;
         stations = [];
         getNearestStations();
     }
@@ -41,6 +43,8 @@
             stations = apiResponse;
         } catch (err) {
             errorMessage = err as string;
+        } finally {
+            config.refreshing = false;
         }
     }