From f27941e445eb985c6e481ce5821ee353c69a4dea Mon Sep 17 00:00:00 2001
From: Martin Gunnerud <mgunnerud@gmail.com>
Date: Fri, 23 Aug 2024 12:47:43 +0200
Subject: [PATCH] fix agressive re-render using studio debounce (#13403)

---
 .../AccessListMembers/AccessListMembers.tsx     | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/resourceadm/components/AccessListMembers/AccessListMembers.tsx b/frontend/resourceadm/components/AccessListMembers/AccessListMembers.tsx
index 09393314ce9..6aa0341c26f 100644
--- a/frontend/resourceadm/components/AccessListMembers/AccessListMembers.tsx
+++ b/frontend/resourceadm/components/AccessListMembers/AccessListMembers.tsx
@@ -47,9 +47,9 @@ export const AccessListMembers = ({
   const [isAddMode, setIsAddMode] = useState<boolean>(false);
   const [isSubPartySearch, setIsSubPartySearch] = useState<boolean>(false);
   const [searchText, setSearchText] = useState<string>('');
+  const [debouncedSearchText, setDebouncedSearchText] = useState<string>('');
   const [searchUrl, setSearchUrl] = useState<string>('');
   const { debounce } = useDebounce({ debounceTimeInMs: 500 });
-  debounce(() => setSearchUrl(searchText ? getPartiesQueryUrl(searchText, isSubPartySearch) : ''));
 
   const { mutate: removeListMember, isPending: isRemovingMember } =
     useRemoveAccessListMemberMutation(org, list.identifier, env);
@@ -67,6 +67,12 @@ export const AccessListMembers = ({
     fetchNextPage,
   } = useGetAccessListMembersQuery(org, list.identifier, env);
 
+  useEffect(() => {
+    setSearchUrl(
+      debouncedSearchText ? getPartiesQueryUrl(debouncedSearchText, isSubPartySearch) : '',
+    );
+  }, [debouncedSearchText, isSubPartySearch]);
+
   useEffect(() => {
     if (members?.pages?.length === 0) {
       setIsAddMode(true);
@@ -131,9 +137,9 @@ export const AccessListMembers = ({
           },
         ],
       };
-    } else if (partiesSearchData) {
+    } else if (partiesSearchData && !isSubPartySearch) {
       return partiesSearchData;
-    } else if (subPartiesSearchData) {
+    } else if (subPartiesSearchData && isSubPartySearch) {
       return subPartiesSearchData;
     } else {
       return undefined;
@@ -186,7 +192,10 @@ export const AccessListMembers = ({
               <Textfield
                 id='party-search'
                 value={searchText}
-                onChange={(event) => setSearchText(event.target.value)}
+                onChange={(event) => {
+                  debounce(() => setDebouncedSearchText(event.target.value));
+                  setSearchText(event.target.value);
+                }}
               />
               <div className={classes.noSearchResults} aria-live='polite'>
                 {resultData?.parties?.length === 0 && (