From 0b619b84a6aa89ee72e412bfe36eec2fc51f38d2 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 13 Mar 2023 13:18:37 -0700
Subject: [PATCH] Add waiting message to hardware screen. Closes #2805

---
 web/pages/admin/hardware-info.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/pages/admin/hardware-info.tsx b/web/pages/admin/hardware-info.tsx
index 94680e4c7..274cf2436 100644
--- a/web/pages/admin/hardware-info.tsx
+++ b/web/pages/admin/hardware-info.tsx
@@ -1,4 +1,4 @@
-import { Row, Col, Typography } from 'antd';
+import { Row, Col, Typography, Alert, Spin } from 'antd';
 import React, { ReactElement, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../../utils/apis';
@@ -21,12 +21,6 @@ const SaveOutlined = dynamic(() => import('@ant-design/icons/SaveOutlined'), {
   ssr: false,
 });
 
-// TODO: FIX TS WARNING FROM THIS.
-// interface TimedValue {
-//   time: Date;
-//   value: Number;
-// }
-
 export default function HardwareInfo() {
   const [hardwareStatus, setHardwareStatus] = useState({
     cpu: [], // Array<TimedValue>(),
@@ -57,7 +51,20 @@ export default function HardwareInfo() {
   }, []);
 
   if (!hardwareStatus.cpu) {
-    return null;
+    return (
+      <div>
+        <Typography.Title>Hardware Info</Typography.Title>
+
+        <Alert
+          style={{ marginTop: '10px' }}
+          banner
+          message="Please wait"
+          description="No hardware details have been collected yet."
+          type="info"
+        />
+        <Spin spinning style={{ width: '100%', margin: '10px' }} />
+      </div>
+    );
   }
 
   const currentCPUUsage = hardwareStatus.cpu[hardwareStatus.cpu.length - 1]?.value;