[TASK] Add loading indicator (#9)

Resolves: #4
FamousWolf · Mar 16, 2024 · abcc03e · abcc03e
1 parent 785f97f
commit abcc03e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/src/card.js b/src/card.js
@@ -24,7 +24,8 @@ export class WeekPlannerCard extends LitElement {
     static get properties() {
         return {
             _days: { type: Array },
-            _config: { type: Object }
+            _config: { type: Object },
+            _isLoading: { type: Boolean }
         }
     }
 
@@ -81,6 +82,10 @@ export class WeekPlannerCard extends LitElement {
                     <div class="container">
                         ${this._renderDays()}
                     </div>
+                    ${this._isLoading ?
+                        html`<div class="loader"></div>` :
+                        ''
+                    }
                 </div>
             </ha-card>
         `;
@@ -151,6 +156,7 @@ export class WeekPlannerCard extends LitElement {
         }
 
         this._loading++;
+        this._isLoading = true;
         this._events = {};
 
         let startDate = moment().startOf('day');
@@ -182,6 +188,7 @@ export class WeekPlannerCard extends LitElement {
             if (this._loading === 0) {
                 clearInterval(checkLoading);
                 this._updateCard();
+                this._isLoading = false;
 
                 window.setTimeout(() => {
                     this._updateEvents();

diff --git a/src/card.styles.js b/src/card.styles.js
@@ -52,6 +52,33 @@ export default css`
         color: var(--secondary-text-color, #aaaaaa);
         margin: 0 0 3px 0;
     }
+
+    .loader {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        width: 40px;
+        height: 40px;
+    }
+    .loader:after {
+        content: " ";
+        display: block;
+        width: 24px;
+        height: 24px;
+        margin: 4px;
+        border-radius: 50%;
+        border: 3px solid var(--primary-text-color);
+        border-color: var(--primary-text-color) transparent var(--primary-text-color) transparent;
+        animation: loader 1.2s linear infinite;
+    }
+    @keyframes loader {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
     
     @container weekplanner (width <= 1280px) {
         div.container div.day {