Standardization

src/pages/settings/components/WoL/WolClients.tsx

@@ -1,4 +1,13 @@
-import { Button, Grid, GridCol, Group, Popover, Stack, TextInput } from '@mantine/core';
+import {
+	Button,
+	Grid,
+	GridCol,
+	Group,
+	LoadingOverlay,
+	Popover,
+	Stack,
+	TextInput,
+} from '@mantine/core';
 import { isNotEmpty, matches, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
@@ -26,7 +35,11 @@ const WolClientSettings = () => {
 		},
 	});
 	const endpoint = 'api/wolClients';
-	const { data: wolClientsData, isFetched: wolClientsIsFetched } = useQueryAPI({
+	const {
+		data: wolClientsData,
+		isFetched: wolClientsIsFetched,
+		isFetching: wolClientsIsFetching,
+	} = useQueryAPI({
 		endpoint: endpoint,
 	});
 	const [wolClients, setWolClients] = useState<WolClient[]>([]);
@@ -145,6 +158,16 @@ const WolClientSettings = () => {
 				w={'100%'}
 				align='center'
 			>
+				<LoadingOverlay
+					visible={wolClientsIsFetching}
+					zIndex={180}
+					overlayProps={{ blur: 5 }}
+					loaderProps={{
+						color: 'var(--mantine-color-primary-0)',
+						type: 'bars',
+						size: 'xl',
+					}}
+				/>
 				<Grid columns={18} w={'75%'}>
 					{wolClients.length > 0 ? (
 						wolClients?.map((client: WolClient) => (