src/lib/cards/Card.svelte

@@ -19,7 +19,7 @@
                 </Tooltip>
             {/if}
             {#if config.showRefresh}
-                <button class:refreshing={config.refreshing} on:click={config.onRefresh} aria-label="Refresh">
+                <button on:click={config.onRefresh} aria-label="Refresh">
                     <IconRefresh />
                 </button>
             {/if}
@@ -67,11 +67,6 @@
         gap: 0px;
     }
 
-    .refreshing {
-        animation: spin 1.5s linear infinite;
-        transform-origin: 50% 45%;
-    }
-
     .content {
         margin-top: 5px;
     }
@@ -87,18 +82,4 @@
     button:hover {
         color: var(--island-header-color);
     }
-
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-            color: white;
-        }
-        50% {
-            color: rgb(185, 185, 255);
-        }
-        100% {
-            transform: rotate(-360deg);
-            color: white;
-        }
-    }
 </style>

src/lib/cards/Card.types.ts

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

src/lib/cards/LookupCard.svelte

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

src/lib/cards/NearToMeCard.svelte

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