From a3bf2af68d1102a6fcb1374f58165c37a5b02114 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Fri, 5 Jul 2024 01:12:56 +0100
Subject: [PATCH] Add rotating reload icon

---
 src/lib/cards/Card.svelte         | 19 ++++++++++++++++---
 src/lib/cards/Card.types.ts       |  1 +
 src/lib/cards/LookupCard.svelte   |  1 +
 src/lib/cards/NearToMeCard.svelte |  4 ++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/lib/cards/Card.svelte b/src/lib/cards/Card.svelte
index 68e8bd8..69f433d 100644
--- a/src/lib/cards/Card.svelte
+++ b/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>
diff --git a/src/lib/cards/Card.types.ts b/src/lib/cards/Card.types.ts
index d364d38..5777ef3 100644
--- a/src/lib/cards/Card.types.ts
+++ b/src/lib/cards/Card.types.ts
@@ -4,6 +4,7 @@ export interface CardConfig {
     showRefresh: boolean;
     helpText: string;
     onRefresh: () => void;
+    refreshing: boolean;
 }
 
 export interface LookupCardConfig {
diff --git a/src/lib/cards/LookupCard.svelte b/src/lib/cards/LookupCard.svelte
index 5121f96..0433b5e 100644
--- a/src/lib/cards/LookupCard.svelte
+++ b/src/lib/cards/LookupCard.svelte
@@ -10,6 +10,7 @@
         showRefresh: false,
         helpText: config.helpText,
         onRefresh: () => {},
+        refreshing: false,
     };
 </script>
 
diff --git a/src/lib/cards/NearToMeCard.svelte b/src/lib/cards/NearToMeCard.svelte
index bf56ce9..36057a0 100644
--- a/src/lib/cards/NearToMeCard.svelte
+++ b/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;
         }
     }