diff --git a/packages/volto/news/6153.internal b/packages/volto/news/6153.internal new file mode 100644 index 0000000000..6c8fd1188e --- /dev/null +++ b/packages/volto/news/6153.internal @@ -0,0 +1 @@ +Debounced searching for users and groups in the `User Group Membership` Control Panel. @pnicolli diff --git a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx index 7c3559f6b9..4530107479 100644 --- a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx @@ -1,5 +1,5 @@ -import React, { useEffect, useState } from 'react'; -import { cloneDeep, uniqBy } from 'lodash'; +import React, { useEffect, useState, useMemo } from 'react'; +import { cloneDeep, uniqBy, debounce } from 'lodash'; import { useIntl } from 'react-intl'; import { useSelector, useDispatch, shallowEqual } from 'react-redux'; import jwtDecode from 'jwt-decode'; @@ -114,25 +114,41 @@ const ListingTemplate = ({ matrix_options = []; } + const debouncedListUsers = useMemo( + () => + debounce((query_user, groups_filter, userLimit) => { + dispatch( + listUsers({ + search: query_user, + groups_filter: groups_filter.map((el) => el.value), + limit: userLimit, + }), + ); + }, 300), + [dispatch], + ); + useEffect(() => { // Get users. if (show_users) { - dispatch( - listUsers({ - search: query_user, - groups_filter: groups_filter.map((el) => el.value), - limit: userLimit, - }), - ); + debouncedListUsers(query_user, groups_filter, userLimit); } - }, [dispatch, query_user, groups_filter, show_users, userLimit]); + }, [debouncedListUsers, query_user, groups_filter, show_users, userLimit]); + + const debouncedListGroups = useMemo( + () => + debounce((query_group) => { + dispatch(listGroups(query_group)); + }, 300), + [dispatch], + ); useEffect(() => { // Get matrix groups. if (show_matrix_options) { - dispatch(listGroups(query_group)); + debouncedListGroups(query_group); } - }, [dispatch, query_group, show_matrix_options, groups_filter]); + }, [debouncedListGroups, query_group, show_matrix_options]); const onSelectOptionHandler = (selectedvalue, checked, singleClick) => { singleClick = singleClick ?? false; diff --git a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx index ca41f24f4f..371acfd32c 100644 --- a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx @@ -1,9 +1,9 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useMemo } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { useIntl } from 'react-intl'; import { Checkbox, Form, Input } from 'semantic-ui-react'; -import { isEqual } from 'lodash'; +import { isEqual, debounce } from 'lodash'; import { messages } from '@plone/volto/helpers'; import { listGroups } from '@plone/volto/actions'; // getRegistry @@ -38,12 +38,20 @@ const UserGroupMembershipMatrix = ({ many_users, many_groups }) => { }); } + const debouncedListGroups = useMemo( + () => + debounce((query_group_filter) => { + dispatch(listGroups('', query_group_filter)); + }, 300), + [dispatch], + ); + useEffect(() => { // TODO fetch group for at least query_group_filter.length > 1? if (!many_groups || (many_groups && query_group_filter.length > 1)) { - dispatch(listGroups('', query_group_filter)); + debouncedListGroups(query_group_filter); } - }, [dispatch, many_groups, query_group_filter]); + }, [debouncedListGroups, many_groups, query_group_filter]); const onReset = (event) => { // event.preventDefault();