feat: Add loader

src/main.js

@@ -322,14 +322,36 @@ class MiniGraphCard extends LitElement {
     `;
   }
 
+  renderLoader() {
+    const { height } = this.config;
+    const numberOfBars = 20;
+    return svg`
+        <div style="align-items: center; justify-content: center; display: flex; transform: rotate(180deg);">
+            <svg width="100%" height="100%" viewBox="0 0 500 ${height}">
+                ${Array.from({ length: numberOfBars }, (_, i) => i).map(i => svg`
+                    <rect x="${(i * (numberOfBars + 3)) + 25}" y="10" width="10" height="${this.getLoaderBarHeight(height, i)}" fill="var(--secondary-text-color)">
+                        <animate attributeName="opacity" calcMode="spline" dur="2s" values="0;1;0" keyTimes="0;0.5;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/>
+                    </rect>
+                `)}
+            </svg>
+        </div>
+    `;
+  }
+
+  getLoaderBarHeight(height, i) {
+    return (Math.abs(Math.sin(i / 2 + 1) * height / 1.5) % height) + 10;
+  }
+
   renderGraph() {
+    const ready = this.entity[0] && this.Graph[0]._history !== undefined;
+
     return this.config.show.graph ? html`
       <div class="graph">
         <div class="graph__container">
           ${this.renderLabels()}
           ${this.renderLabelsSecondary()}
           <div class="graph__container__svg">
-            ${this.renderSvg()}
+            ${ready ? this.renderSvg() : this.renderLoader()}
           </div>
         </div>
         ${this.renderLegend()}