Skip to content

Commit 7b3d116

Browse files
devksingh4devksingh4
committed
add more loading skeletons to UI
1 parent 095f933 commit 7b3d116

File tree

2 files changed

+137
-48
lines changed

2 files changed

+137
-48
lines changed

‎src/ui/pages/iam/GroupMemberManagement.tsx‎

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
import React, { useState, useEffect } from 'react';
2-
import { Avatar, Badge, Group, Table, Text, Button, TextInput, Modal, Select } from '@mantine/core';
2+
import {
3+
Avatar,
4+
Badge,
5+
Group,
6+
Table,
7+
Text,
8+
Button,
9+
TextInput,
10+
Modal,
11+
Loader,
12+
Skeleton,
13+
} from '@mantine/core';
314
import { IconUserPlus, IconTrash } from '@tabler/icons-react';
415
import { notifications } from '@mantine/notifications';
516
import { GroupMemberGetResponse, EntraActionResponse } from '@common/types/iam';
6-
import FullScreenLoader from '@ui/components/AuthContext/LoadingScreen';
717

818
interface GroupMemberManagementProps {
919
fetchMembers: () => Promise<GroupMemberGetResponse>;
@@ -159,7 +169,7 @@ const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
159169
</Table.Td>
160170
<Table.Td>
161171
<Badge color="blue" variant="light">
162-
Queued for addition
172+
Active
163173
</Badge>
164174
</Table.Td>
165175
<Table.Td>
@@ -183,20 +193,55 @@ const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
183193
Exec Council Group Management
184194
</Text>
185195

186-
{isLoading ? (
187-
<FullScreenLoader />
188-
) : (
189-
<Table verticalSpacing="sm">
190-
<Table.Thead>
191-
<Table.Tr>
192-
<Table.Th>Member</Table.Th>
193-
<Table.Th>Status</Table.Th>
194-
<Table.Th>Actions</Table.Th>
196+
<Table verticalSpacing="sm">
197+
<Table.Thead>
198+
<Table.Tr>
199+
<Table.Th>Member</Table.Th>
200+
<Table.Th>Status</Table.Th>
201+
<Table.Th>Actions</Table.Th>
202+
</Table.Tr>
203+
</Table.Thead>
204+
<Table.Tbody>
205+
{isLoading ? (
206+
<Table.Tr key="skeleton">
207+
<Table.Td>
208+
<Skeleton visible={true}>
209+
<Group gap="sm">
210+
<Avatar name={email} color="initials"></Avatar>
211+
<div>
212+
<Text fz="sm" fw={500}>
213+
Johnathan Doe
214+
</Text>
215+
<Text fz="xs" c="dimmed">
216+
[email protected]
217+
</Text>
218+
</div>
219+
</Group>
220+
</Skeleton>
221+
</Table.Td>
222+
<Table.Td>
223+
<Skeleton visible={true}>
224+
<Badge color="blue" variant="light"></Badge>
225+
</Skeleton>
226+
</Table.Td>
227+
<Table.Td>
228+
<Skeleton visible={true}>
229+
<Button
230+
color="red"
231+
variant="light"
232+
size="xs"
233+
leftSection={<IconTrash size={14} />}
234+
>
235+
Remove
236+
</Button>
237+
</Skeleton>
238+
</Table.Td>
195239
</Table.Tr>
196-
</Table.Thead>
197-
<Table.Tbody>{rows}</Table.Tbody>
198-
</Table>
199-
)}
240+
) : (
241+
rows
242+
)}
243+
</Table.Tbody>
244+
</Table>
200245

201246
<TextInput
202247
value={email}

‎src/ui/pages/stripe/CurrentLinks.tsx‎

Lines changed: 76 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Group,
77
Loader,
88
NumberFormatter,
9+
Skeleton,
910
Table,
1011
Title,
1112
} from '@mantine/core';
@@ -121,38 +122,81 @@ export const StripeCurrentLinksPanel: React.FC<StripeCurrentLinksPanelProps> = (
121122
)}
122123
</Group>
123124

124-
{isLoading && <Loader color="blue" />}
125-
{!isLoading && links && (
126-
<Table.ScrollContainer minWidth={500}>
127-
<Table>
128-
<Table.Thead>
129-
<Table.Tr>
130-
<Table.Th>
131-
<Checkbox
132-
aria-label="Select all rows"
133-
checked={selectedRows.length === links.length}
134-
onChange={(event) =>
135-
setSelectedRows(() => {
136-
if (selectedRows.length === links.length) {
137-
return [];
138-
}
139-
return links.map((x) => x.id);
140-
})
141-
}
142-
/>
143-
</Table.Th>
144-
<Table.Th>Status</Table.Th>
145-
<Table.Th>Invoice ID</Table.Th>
146-
<Table.Th>Invoice Amount</Table.Th>
147-
<Table.Th>Created By</Table.Th>
148-
<Table.Th>Created At</Table.Th>
149-
<Table.Th>Payment Link</Table.Th>
150-
</Table.Tr>
151-
</Table.Thead>
152-
<Table.Tbody>{links.map(createTableRow)}</Table.Tbody>
153-
</Table>
154-
</Table.ScrollContainer>
155-
)}
125+
<Table.ScrollContainer minWidth={500}>
126+
<Table>
127+
<Table.Thead>
128+
<Table.Tr>
129+
<Table.Th>
130+
<Checkbox
131+
aria-label="Select all rows"
132+
checked={links ? selectedRows.length === links.length : false}
133+
onChange={(event) =>
134+
setSelectedRows(() => {
135+
if (!links) {
136+
return [];
137+
}
138+
if (selectedRows.length === links.length) {
139+
return [];
140+
}
141+
return links.map((x) => x.id);
142+
})
143+
}
144+
/>
145+
</Table.Th>
146+
<Table.Th>Status</Table.Th>
147+
<Table.Th>Invoice ID</Table.Th>
148+
<Table.Th>Invoice Amount</Table.Th>
149+
<Table.Th>Created By</Table.Th>
150+
<Table.Th>Created At</Table.Th>
151+
<Table.Th>Payment Link</Table.Th>
152+
</Table.Tr>
153+
</Table.Thead>
154+
<Table.Tbody>
155+
{isLoading || !links ? (
156+
<>
157+
<Table.Tr key="skeleton">
158+
<Table.Td>
159+
<Checkbox aria-label="Select row" checked={false} />
160+
</Table.Td>
161+
<Table.Td>
162+
<Skeleton visible>
163+
<Badge color="green" variant="light">
164+
Active
165+
</Badge>
166+
</Skeleton>
167+
</Table.Td>
168+
<Table.Td>
169+
<Skeleton visible>Sample Text</Skeleton>
170+
</Table.Td>
171+
<Table.Td>
172+
<Skeleton visible>Sample Text</Skeleton>
173+
</Table.Td>
174+
<Table.Td>
175+
<Skeleton visible>Sample Text</Skeleton>
176+
</Table.Td>
177+
<Table.Td>
178+
<Skeleton visible>Sample Text</Skeleton>
179+
</Table.Td>
180+
<Table.Td>
181+
<Skeleton visible>
182+
{' '}
183+
<CopyButton value={''}>
184+
{({ copied, copy }) => (
185+
<Button color={copied ? 'teal' : 'blue'} onClick={copy}>
186+
{copied ? 'Copied!' : 'Copy'}
187+
</Button>
188+
)}
189+
</CopyButton>
190+
</Skeleton>
191+
</Table.Td>
192+
</Table.Tr>
193+
</>
194+
) : (
195+
links.map(createTableRow)
196+
)}
197+
</Table.Tbody>
198+
</Table>
199+
</Table.ScrollContainer>
156200
</div>
157201
);
158202
};

0 commit comments

Comments
 (0)