From 2c95c20830856b46d1841d134d7653226f1ba16c Mon Sep 17 00:00:00 2001
From: Owen Yamauchi <owen@rewiringamerica.org>
Date: Fri, 15 Sep 2023 16:53:58 -0400
Subject: [PATCH] Use a shoelace spinner as loading state

---
 src/state-calculator.ts        | 8 +++++++-
 src/state-incentive-details.ts | 5 +++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/state-calculator.ts b/src/state-calculator.ts
index d96c492..0bb9103 100644
--- a/src/state-calculator.ts
+++ b/src/state-calculator.ts
@@ -19,8 +19,14 @@ import {
 } from './utility-selector';
 import { iconTabBarStyles } from './icon-tab-bar';
 
+import '@shoelace-style/shoelace/dist/components/spinner/spinner';
+
 const loadingTemplate = () => html`
-  <div class="card card-content">Loading...</div>
+  <div class="card card-content">
+    <div class="loading">
+      <sl-spinner></sl-spinner>
+    </div>
+  </div>
 `;
 
 const errorTemplate = (error: unknown) => html`
diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
index c3e7595..506c1b2 100644
--- a/src/state-incentive-details.ts
+++ b/src/state-incentive-details.ts
@@ -5,6 +5,11 @@ import { PROJECTS, Project, shortLabel } from './projects';
 import { iconTabBarTemplate } from './icon-tab-bar';
 
 export const stateIncentivesStyles = css`
+  .loading {
+    text-align: center;
+    font-size: 2rem;
+  }
+
   .incentive {
     display: flex;
     flex-direction: column;