Add loading for initial state on graph (#5448)

* Fix type

* Add loading spinner for initial state

* Move to better position

* Make var not a property

* Make spinner same height as graph

* Fix size

* Make spinner centered

* Adjust spinner position

* Remove boolean and make no state history match height

* Merge

* eslint

* Fix value

Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

* Commit suggestion

Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

* Suggested change

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/common/graph/get-history-coordinates.ts

@@ -7,7 +7,7 @@ export const getHistoryCoordinates = async (
   entity: string,
   hours: number,
   detail: number
-): Promise<number[][] | undefined> => {
+): Promise<number[][]> => {
   const endTime = new Date();
   const startTime = new Date();
   startTime.setHours(endTime.getHours() - hours);
@@ -15,10 +15,14 @@ export const getHistoryCoordinates = async (
   const stateHistory = await fetchRecent(hass, entity, startTime, endTime);
 
   if (stateHistory.length < 1 || stateHistory[0].length < 1) {
-    return undefined;
+    return [];
   }
 
   const coords = coordinates(stateHistory[0], hours, 500, detail);
 
+  if (!coords) {
+    return [];
+  }
+
   return coords;
 };

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -10,6 +10,8 @@ import {
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
 import { getHistoryCoordinates } from "../common/graph/get-history-coordinates";
+
+import "@polymer/paper-spinner/paper-spinner";
 import "../components/hui-graph-base";
 import { LovelaceHeaderFooter } from "../types";
 import { GraphHeaderFooterConfig } from "./types";
@@ -27,7 +29,7 @@ export class HuiGraphHeaderFooter extends LitElement
 
   @property() protected _config?: GraphHeaderFooterConfig;
 
-  @property() private _coordinates?: any;
+  @property() private _coordinates?: number[][];
 
   private _date?: Date;
 
@@ -60,9 +62,19 @@ export class HuiGraphHeaderFooter extends LitElement
 
     if (!this._coordinates) {
       return html`
+        <div class="container">
+          <paper-spinner active></paper-spinner>
+        </div>
+      `;
+    }
+
+    if (this._coordinates.length < 1) {
+      return html`
+        <div class="container">
           <div class="info">
             No state history found.
           </div>
+        </div>
       `;
     }
 
@@ -100,9 +112,19 @@ export class HuiGraphHeaderFooter extends LitElement
 
   static get styles(): CSSResult {
     return css`
+      paper-spinner {
+        position: absolute;
+        top: calc(50% - 28px);
+      }
+      .container {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        padding-bottom: 20%;
+      }
       .info {
-        text-align: center;
+        position: absolute;
-        line-height: 58px;
+        top: calc(50% - 16px);
         color: var(--secondary-text-color);
       }
     `;