fix agressive re-render using studio debounce (#13403)

Altinn · Aug 23, 2024 · f27941e · f27941e
1 parent 0ca075b
commit f27941e
Showing 1 changed file with 13 additions and 4 deletions.
diff --git 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 && (