diff --git a/src/panels/lovelace/common/graph/get-history-coordinates.ts b/src/panels/lovelace/common/graph/get-history-coordinates.ts
index 9e0d2ba864..a8d08cf4ca 100644
--- a/src/panels/lovelace/common/graph/get-history-coordinates.ts
+++ b/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;
 };
diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
index 572065d2a6..b82616ba61 100644
--- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
+++ b/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,8 +62,18 @@ export class HuiGraphHeaderFooter extends LitElement
 
     if (!this._coordinates) {
       return html`
-        <div class="info">
-          No state history found.
+        <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;
-        line-height: 58px;
+        position: absolute;
+        top: calc(50% - 16px);
         color: var(--secondary-text-color);
       }
     `;