Skip to content

Commit 5b430e4

Browse files
abishekveabishekve
committed
fix: added loading state in status table
1 parent 81d8487 commit 5b430e4

File tree

2 files changed

+367
-349
lines changed

2 files changed

+367
-349
lines changed

‎thingconnect.pulse.client/src/components/status/StatusTable.tsx‎

Lines changed: 92 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { Box, Text, Badge, HStack, Center, Spinner } from '@chakra-ui/react';
1+
import { Box, Text, Badge, HStack, Center, Spinner, Skeleton } from '@chakra-ui/react';
22
import { Table } from '@chakra-ui/react';
33
import { formatDistanceToNow } from 'date-fns';
44
import { useNavigate } from 'react-router-dom';
55
import type { LiveStatusItem } from '@/api/types';
66
import TrendBlocks from './TrendBlocks';
77

88
interface StatusTableProps {
9-
items: LiveStatusItem[];
9+
items: LiveStatusItem[] | null | undefined;
1010
isLoading?: boolean;
1111
}
1212

13-
export function StatusTable({ items , isLoading }: StatusTableProps) {
13+
export function StatusTable({ items, isLoading }: StatusTableProps) {
1414
const navigate = useNavigate();
1515

1616
const getStatusColor = (status: string) => {
@@ -42,98 +42,118 @@ export function StatusTable({ items , isLoading }: StatusTableProps) {
4242
const handleRowClick = (id: string) => {
4343
void navigate(`/endpoints/${id}`);
4444
};
45-
console.log("isLoading in StatusTable:",items);
45+
console.log('isLoading in StatusTable:', items);
4646
return (
47-
<Box borderRadius="md" overflow="hidden">
48-
{isLoading ? (
49-
<Center py={10}>
50-
<Spinner size="lg" color="blue.500"/>
51-
</Center>
52-
) : (
53-
<Table.Root size="md" borderWidth={0} width="full">
47+
<Box borderRadius='md' overflow='hidden'>
48+
<Table.Root size='md' borderWidth={0} width='full'>
5449
<Table.Header>
55-
<Table.Row fontSize="12px" fontWeight="bold" textTransform="uppercase">
56-
<Table.ColumnHeader width="10%" color="gray.500" _dark={{ color: 'gray.400' }}>
50+
<Table.Row fontSize='12px' fontWeight='bold' textTransform='uppercase'>
51+
<Table.ColumnHeader width='10%' color='gray.500' _dark={{ color: 'gray.400' }}>
5752
Status
5853
</Table.ColumnHeader>
59-
<Table.ColumnHeader width="20%" color="gray.500" _dark={{ color: 'gray.400' }}>
54+
<Table.ColumnHeader width='20%' color='gray.500' _dark={{ color: 'gray.400' }}>
6055
Name
6156
</Table.ColumnHeader>
62-
<Table.ColumnHeader width="15%" color="gray.500" _dark={{ color: 'gray.400' }}>
57+
<Table.ColumnHeader width='15%' color='gray.500' _dark={{ color: 'gray.400' }}>
6358
Host
6459
</Table.ColumnHeader>
65-
<Table.ColumnHeader width="15%" color="gray.500" _dark={{ color: 'gray.400' }}>
60+
<Table.ColumnHeader width='15%' color='gray.500' _dark={{ color: 'gray.400' }}>
6661
Group
6762
</Table.ColumnHeader>
68-
<Table.ColumnHeader width="10%" color="gray.500" _dark={{ color: 'gray.400' }}>
63+
<Table.ColumnHeader width='10%' color='gray.500' _dark={{ color: 'gray.400' }}>
6964
RTT
7065
</Table.ColumnHeader>
71-
<Table.ColumnHeader width="15%" color="gray.500" _dark={{ color: 'gray.400' }}>
66+
<Table.ColumnHeader width='15%' color='gray.500' _dark={{ color: 'gray.400' }}>
7267
Last Change
7368
</Table.ColumnHeader>
74-
<Table.ColumnHeader width="15%" color="gray.500" _dark={{ color: 'gray.400' }}>
69+
<Table.ColumnHeader width='15%' color='gray.500' _dark={{ color: 'gray.400' }}>
7570
Trend
7671
</Table.ColumnHeader>
7772
</Table.Row>
7873
</Table.Header>
7974

8075
<Table.Body>
81-
{items?.map(item => (
82-
<Table.Row
83-
key={item.endpoint.id}
84-
cursor="pointer"
85-
_hover={{ bg: 'gray.50', _dark: { bg: 'gray.800' } }}
86-
onClick={() => handleRowClick(item.endpoint.id)}
87-
>
88-
<Table.Cell width="10%">
89-
<Badge
90-
variant="subtle"
91-
px={2}
92-
py={1}
93-
borderRadius="md"
94-
fontSize="10px"
95-
colorPalette={getStatusColor(item.status)}
76+
{isLoading
77+
? Array.from({ length: 10 }).map((_, rowIndex) => (
78+
<Table.Row key={`skeleton-${rowIndex}`}>
79+
<Table.Cell width='10%'>
80+
<Skeleton height='20px' width='60px' borderRadius='md' />
81+
</Table.Cell>
82+
<Table.Cell width='20%'>
83+
<Skeleton height='20px' width='120px' borderRadius='md' />
84+
</Table.Cell>
85+
<Table.Cell width='15%'>
86+
<Skeleton height='20px' width='100px' borderRadius='md' />
87+
</Table.Cell>
88+
<Table.Cell width='15%'>
89+
<Skeleton height='20px' width='80px' borderRadius='md' />
90+
</Table.Cell>
91+
<Table.Cell width='10%'>
92+
<Skeleton height='20px' width='50px' borderRadius='md' />
93+
</Table.Cell>
94+
<Table.Cell width='15%'>
95+
<Skeleton height='20px' width='100px' borderRadius='md' />
96+
</Table.Cell>
97+
<Table.Cell width='15%'>
98+
<Skeleton height='20px' width='80px' borderRadius='md' />
99+
</Table.Cell>
100+
</Table.Row>
101+
))
102+
: items?.map(item => (
103+
<Table.Row
104+
key={item.endpoint.id}
105+
cursor='pointer'
106+
_hover={{ bg: 'gray.50', _dark: { bg: 'gray.800' } }}
107+
onClick={() => handleRowClick(item.endpoint.id)}
96108
>
97-
{item.status.toUpperCase()}
98-
</Badge>
99-
</Table.Cell>
100-
<Table.Cell width="20%">
101-
<Text fontWeight="medium">{item.endpoint.name}</Text>
102-
</Table.Cell>
103-
<Table.Cell width="15%">
104-
<HStack gap={2} color="gray.500" _dark={{ color: 'gray.400' }}>
105-
<Text fontFamily="monospace" fontSize="sm">
106-
{item.endpoint.host}
107-
</Text>
108-
{item.endpoint.port && <Text fontSize="xs">:{item.endpoint.port}</Text>}
109-
</HStack>
110-
</Table.Cell>
111-
<Table.Cell width="15%">
112-
<Text fontSize="sm">{item.endpoint.group.name}</Text>
113-
</Table.Cell>
114-
<Table.Cell width="10%">
115-
<Text
116-
fontFamily="monospace"
117-
fontSize="sm"
118-
color={item.rttMs ? 'inherit' : 'gray.500'}
119-
_dark={{ color: item.rttMs ? 'inherit' : 'gray.400' }}
120-
>
121-
{formatRTT(item.rttMs)}
122-
</Text>
123-
</Table.Cell>
124-
<Table.Cell width="15%">
125-
<Text fontSize="sm" color="gray.600" _dark={{ color: 'gray.400' }}>
126-
{formatLastChange(item.lastChangeTs)}
127-
</Text>
128-
</Table.Cell>
129-
<Table.Cell width="15%">
130-
<TrendBlocks data={item.sparkline} />
131-
</Table.Cell>
132-
</Table.Row>
133-
))}
109+
<Table.Cell width='10%'>
110+
<Badge
111+
variant='subtle'
112+
px={2}
113+
py={1}
114+
borderRadius='md'
115+
fontSize='10px'
116+
colorPalette={getStatusColor(item.status)}
117+
>
118+
{item.status.toUpperCase()}
119+
</Badge>
120+
</Table.Cell>
121+
<Table.Cell width='20%'>
122+
<Text fontWeight='medium'>{item.endpoint.name}</Text>
123+
</Table.Cell>
124+
<Table.Cell width='15%'>
125+
<HStack gap={2} color='gray.500' _dark={{ color: 'gray.400' }}>
126+
<Text fontFamily='monospace' fontSize='sm'>
127+
{item.endpoint.host}
128+
</Text>
129+
{item.endpoint.port && <Text fontSize='xs'>:{item.endpoint.port}</Text>}
130+
</HStack>
131+
</Table.Cell>
132+
<Table.Cell width='15%'>
133+
<Text fontSize='sm'>{item.endpoint.group.name}</Text>
134+
</Table.Cell>
135+
<Table.Cell width='10%'>
136+
<Text
137+
fontFamily='monospace'
138+
fontSize='sm'
139+
color={item.rttMs ? 'inherit' : 'gray.500'}
140+
_dark={{ color: item.rttMs ? 'inherit' : 'gray.400' }}
141+
>
142+
{formatRTT(item.rttMs)}
143+
</Text>
144+
</Table.Cell>
145+
<Table.Cell width='15%'>
146+
<Text fontSize='sm' color='gray.600' _dark={{ color: 'gray.400' }}>
147+
{formatLastChange(item.lastChangeTs)}
148+
</Text>
149+
</Table.Cell>
150+
<Table.Cell width='15%'>
151+
<TrendBlocks data={item.sparkline} />
152+
</Table.Cell>
153+
</Table.Row>
154+
))}
134155
</Table.Body>
135156
</Table.Root>
136-
)}
137157
</Box>
138158
);
139159
}

0 commit comments

Comments
 (0)