State management

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -10,7 +10,7 @@ import {
 	TextInput,
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
-import { FiHelpCircle, FiPlus } from 'react-icons/fi';
+import { FiHelpCircle, FiLoader, FiPlus } from 'react-icons/fi';
 import {
 	actionIconClasses,
 	buttonClasses,
@@ -28,6 +28,8 @@ function SettingsHeader({
 	searchValue,
 	setSearchValue,
 	searchPlaceholder,
+	isLoading,
+	setIsLoading,
 }: {
 	setDragging: undefined | ((dragging: boolean) => void);
 	openModal: () => void;
@@ -40,6 +42,8 @@ function SettingsHeader({
 	searchValue: string | undefined;
 	setSearchValue: (searchValue: string) => void;
 	searchPlaceholder: string | undefined;
+	isLoading: boolean;
+	setIsLoading: (isLoading: boolean) => void;
 }) {
 	const { isMobile } = useCommonHooks();
 	return (
@@ -105,7 +109,7 @@ function SettingsHeader({
 				</Popover>
 				{searchValue !== undefined && (
 					<Button
-						className={buttonClasses.tableButton}
+						className={buttonClasses.newItemButton}
 						classNames={buttonClasses}
 						onClick={openModal}
 					>
@@ -123,11 +127,22 @@ function SettingsHeader({
 					placeholder={searchPlaceholder ?? 'Search...'}
 					value={searchValue}
 					onInput={(event: any) => {
+						setIsLoading(true);
 						setSearchValue(event.target.value);
 					}}
 					style={{
 						zIndex: 100,
 					}}
+					rightSection={
+						isLoading && (
+							<ActionIcon
+								className={actionIconClasses.loadingSpinner}
+								classNames={actionIconClasses}
+							>
+								<FiLoader />
+							</ActionIcon>
+						)
+					}
 				/>
 			)}
 			{setDragging && (