More performance updates

src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx

@@ -15,10 +15,10 @@ import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FaTerminal } from 'react-icons/fa';
 import { FaComputer, FaDesktop } from 'react-icons/fa6';
-import { popoverClasses, selectClasses, textInputClasses } from 'styles';
+import { buttonClasses, popoverClasses, selectClasses, textInputClasses } from 'styles';
 import type { GuacamoleClient } from 'types';
 import DebouncedGuacamoleClient from './DebouncedGuacamoleClient';
 import GuacamoleClientSettingsItem from './GuacamoleClientSettingsItem';
@@ -65,6 +65,12 @@ const GuacamoleClients = () => {
 		form.reset();
 	};
 
+	useEffect(() => {
+		if (debouncedSearch === searchValue) {
+			setIsLoading(false);
+		}
+	}, [debouncedSearch]);
+
 	return (
 		<Stack>
 			<AddItemModal
@@ -169,12 +175,16 @@ const GuacamoleClients = () => {
 								/>
 							</Group>
 							<Group mt={'1rem'}>
-								<Button type='submit' color={'green'}>
+								<Button
+									type='submit'
+									className={buttonClasses.saveButton}
+									classNames={buttonClasses}
+								>
 									Save
 								</Button>
 								<Button
-									color={'red'}
-									styles={{ label: { color: 'black' } }}
+									className={buttonClasses.cancelButton}
+									classNames={buttonClasses}
 									onClick={handleClose}
 								>
 									Cancel