From 3d42bfc81b972e3c45adf37862c03bd089a3ef0a Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 13 Apr 2025 20:30:31 -0600
Subject: [PATCH] feat: implement debounced search functionality in
 RestoreBackup component

- Added a new state for debounced search term to improve search performance.
- Updated search handling to use the debounced value when querying backup files.
- Modified the search input to reflect the current search value and handle changes accordingly.
---
 .../dashboard/database/backups/restore-backup.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx b/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
index 10ebbe08..797e1ca8 100644
--- a/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
@@ -84,6 +84,7 @@ export const RestoreBackup = ({
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [search, setSearch] = useState("");
+	const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
 
 	const { data: destinations = [] } = api.destination.all.useQuery();
 
@@ -99,13 +100,18 @@ export const RestoreBackup = ({
 	const destionationId = form.watch("destinationId");
 
 	const debouncedSetSearch = debounce((value: string) => {
+		setDebouncedSearchTerm(value);
+	}, 150);
+
+	const handleSearchChange = (value: string) => {
 		setSearch(value);
-	}, 300);
+		debouncedSetSearch(value);
+	};
 
 	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
 		{
 			destinationId: destionationId,
-			search,
+			search: debouncedSearchTerm,
 			serverId: serverId ?? "",
 		},
 		{
@@ -284,7 +290,8 @@ export const RestoreBackup = ({
 											<Command>
 												<CommandInput
 													placeholder="Search backup files..."
-													onValueChange={debouncedSetSearch}
+													value={search}
+													onValueChange={handleSearchChange}
 													className="h-9"
 												/>
 												{isLoading ? (
@@ -308,6 +315,8 @@ export const RestoreBackup = ({
 																	key={file}
 																	onSelect={() => {
 																		form.setValue("backupFile", file);
+																		setSearch(file);
+																		setDebouncedSearchTerm(file);
 																	}}
 																>
 																	<div className="flex w-full justify-between">