schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: add loading and empty state in monitor list

Browse Source
This commit is contained in:
moonrailgun 2023-11-02 00:19:00 +08:00
parent 39b4ff9ec5
commit 4529dbca75
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/components/monitor/MonitorList.tsx
View File

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