fix(bulk-import): removing extra apis call (#882)

* fix(bulk-import): removing extra apis call

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* adding yarn.lock

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* adding changeset

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* updating yarn.lock

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* using useDebounce

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* removing lodash.debaounce from dependency

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* removing unused dependency

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

---------

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

Author: its-mitesh-kumar

workspaces/bulk-import/.changeset/selfish-brooms-heal.md

@@ -0,0 +1,12 @@
+---
+'@red-hat-developer-hub/backstage-plugin-bulk-import': patch
+---
+
+Improve Bulk Import UI performance by optimizing API call behavior:
+
+- Prevent unnecessary API calls when switching between **Organizations** and **Repositories** tabs.
+- Avoid redundant calls when clicking on pagination controls without changing page or page size.
+- Suppress extraneous API requests triggered by random screen clicks.
+- Introduce **debouncing** to the search input to reduce network load during fast typing.
+
+These changes reduce client-side overhead and improve the responsiveness of the Bulk Import page.

workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx

@@ -15,6 +15,7 @@
  */
 
 import { useEffect, useState } from 'react';
+import { useDebounce } from 'react-use';
 
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
@@ -40,11 +41,18 @@ export const AddRepositoriesTable = ({ title }: { title?: string }) => {
     setIsApprovalToolGitlab(values.approvalTool === ApprovalToolEnum.Gitlab);
   }, [values.approvalTool]);
   const [searchString, setSearchString] = useState<string>('');
+  const [searchInput, setSearchInput] = useState<string>('');
   const [page, setPage] = useState<number>(0);
-  const handleSearch = (str: string) => {
-    setSearchString(str);
-    setPage(0);
-  };
+
+  useDebounce(
+    () => {
+      setSearchString(searchInput);
+      setPage(0);
+    },
+    300,
+    [searchInput],
+  );
+
   const { numberOfApprovalTools } = useNumberOfApprovalTools();
 
   return (
@@ -61,7 +69,7 @@ export const AddRepositoriesTable = ({ title }: { title?: string }) => {
             title ||
             `Selected  ${isApprovalToolGitlab ? 'projects' : 'repositories'}`
           }
-          setSearchString={handleSearch}
+          setSearchString={setSearchInput}
           onPageChange={setPage}
           isApprovalToolGitlab={isApprovalToolGitlab}
         />

workspaces/bulk-import/plugins/bulk-import/src/hooks/useRepositories.ts

@@ -99,7 +99,7 @@ export const useRepositories = (
   } = useQuery(
     [options?.showOrganizations ? 'organizations' : 'repositories', options],
     () => fetchRepositories(options),
-    { refetchInterval: pollInterval || 60000 },
+    { refetchInterval: pollInterval || 60000, refetchOnWindowFocus: false },
   );
 
   const prepareData = useMemo(() => {

workspaces/bulk-import/yarn.lock

@@ -13853,9 +13853,9 @@ __metadata:
   linkType: hard
 
 "@types/lodash@npm:^4.14.151":
-  version: 4.17.13
-  resolution: "@types/lodash@npm:4.17.13"
-  checksum: d0bf8fbd950be71946e0076b30fd40d492293baea75f05931b6b5b906fd62583708c6229abdb95b30205ad24ce1ed2f48bc9d419364f682320edd03405cc0c7e
+  version: 4.17.17
+  resolution: "@types/lodash@npm:4.17.17"
+  checksum: cfa34a752f3c540a196e9f92dbaff93ae15fe4058da8cce1918dd9219076dc19eec33b043aae45865e2b3ef8234a845bb57366144ec8e52551e2bc3f119e04a1
   languageName: node
   linkType: hard