Starting guac clients

src/components/SettingsHeader.tsx

@@ -7,7 +7,6 @@ import {
 	Stack,
 	Switch,
 	Text,
-	TextInput,
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
@@ -20,6 +19,7 @@ import {
 	textClasses,
 	textInputClasses,
 } from 'styles';
+import { DebouncedInput } from './DebouncedInput';
 
 export function SettingsHeader({
 	setDragging,
@@ -40,8 +40,8 @@ export function SettingsHeader({
 		highlightList: string[];
 		description: string;
 	};
-	searchValue: string | undefined;
-	setSearchValue: (searchValue: string) => void;
+	searchValue: string | number;
+	setSearchValue: (searchValue: string | number) => void;
 	searchPlaceholder: string | undefined;
 	isLoading: boolean;
 	setIsLoading: (isLoading: boolean) => void;
@@ -120,7 +120,7 @@ export function SettingsHeader({
 				)}
 			</Group>
 			{searchValue !== undefined && (
-				<TextInput
+				<DebouncedInput
 					disabled={disabled}
 					w={isMobile ? undefined : '35%'}
 					pos={isMobile ? undefined : 'absolute'}
@@ -129,9 +129,9 @@ export function SettingsHeader({
 					autoFocus={!isMobile}
 					placeholder={searchPlaceholder ?? 'Search...'}
 					value={searchValue}
-					onInput={(event: any) => {
-						setIsLoading(true);
-						setSearchValue(event.target.value);
+					onInput={() => setIsLoading(true)}
+					onChange={(value: any) => {
+						setSearchValue(value);
 					}}
 					style={{
 						zIndex: 100,