From 4529dbca75af10c18838969407d7834e0b942d20 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 2 Nov 2023 00:19:00 +0800
Subject: [PATCH] refactor: add loading and empty state in monitor list

---
 src/client/components/monitor/MonitorList.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/client/components/monitor/MonitorList.tsx b/src/client/components/monitor/MonitorList.tsx
index f82f2d0..5a5344d 100644
--- a/src/client/components/monitor/MonitorList.tsx
+++ b/src/client/components/monitor/MonitorList.tsx
@@ -5,12 +5,14 @@ import { AppRouterOutput, trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { NoWorkspaceTip } from '../NoWorkspaceTip';
 import { MonitorHealthBar } from './MonitorHealthBar';
+import { Loading } from '../Loading';
+import { Empty } from 'antd';
 
 type MonitorType = AppRouterOutput['monitor']['all'][number];
 
 export const MonitorList: React.FC = React.memo(() => {
   const workspaceId = useCurrentWorkspaceId();
-  const { data: monitors = [] } = trpc.monitor.all.useQuery({
+  const { data: monitors = [], isLoading } = trpc.monitor.all.useQuery({
     workspaceId,
   });
   const initMonitorId = useMemo(() => {
@@ -35,8 +37,14 @@ export const MonitorList: React.FC = React.memo(() => {
     return <NoWorkspaceTip />;
   }
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <div className="p-2">
+      {monitors.length === 0 && <Empty description="Here is no monitor yet." />}
+
       {monitors.map((monitor) => (
         <MonitorListItem
           key={monitor.id}