Use a shoelace spinner as loading state

rewiringamerica · Sep 15, 2023 · 2c95c20 · 2c95c20
1 parent cb164d1
commit 2c95c20
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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;