pref: useScrollPagination support debounce and throttle. (#4355)

* pref: useScrollPagination support debounce and throttle.

* fix: useScrollPagination loading

* fix: isloading

* fix: org search path hide

packages/web/hooks/useScrollPagination.tsx

@@ -14,6 +14,7 @@ import {
 } from 'ahooks';
 import MyBox from '../components/common/MyBox';
 import { useTranslation } from 'next-i18next';
+import { useRequest2 } from './useRequest';
 
 type ItemHeight<T> = (index: number, data: T) => number;
 const thresholdVal = 100;
@@ -183,22 +184,21 @@ export function useScrollPagination<
 >(
   api: (data: TParams) => Promise<TData>,
   {
-    refreshDeps,
     scrollLoadType = 'bottom',
 
     pageSize = 10,
     params = {},
     EmptyTip,
-    showErrorToast = true
+    showErrorToast = true,
+    ...props
   }: {
-    refreshDeps?: any[];
     scrollLoadType?: 'top' | 'bottom';
 
     pageSize?: number;
     params?: Record<string, any>;
     EmptyTip?: React.JSX.Element;
     showErrorToast?: boolean;
-  }
+  } & Parameters<typeof useRequest2>[1]
 ) {
   const { t } = useTranslation();
   const { toast } = useToast();
@@ -213,6 +213,7 @@ export function useScrollPagination<
   const loadData = useLockFn(
     async (init = false, ScrollContainerRef?: RefObject<HTMLDivElement>) => {
       if (noMore && !init) return;
+      setTrue();
 
       if (init) {
         setData([]);
@@ -221,8 +222,6 @@ export function useScrollPagination<
 
       const offset = init ? 0 : data.length;
 
-      setTrue();
-
       try {
         const res = await api({
           offset,
@@ -274,7 +273,7 @@ export function useScrollPagination<
     ({
       children,
       ScrollContainerRef,
-      isLoading,
+      isLoading: isLoadingProp,
       ...props
     }: {
       isLoading?: boolean;
@@ -283,7 +282,7 @@ export function useScrollPagination<
     } & BoxProps) => {
       const ref = ScrollContainerRef || ScrollRef;
       const loadText = useMemo(() => {
-        if (isLoading) return t('common:common.is_requesting');
+        if (isLoading || isLoadingProp) return t('common:common.is_requesting');
         if (noMore) return t('common:common.request_end');
         return t('common:common.request_more');
       }, [isLoading, noMore]);
@@ -338,13 +337,13 @@ export function useScrollPagination<
   );
 
   // Reload data
-  useRequest(
+  useRequest2(
     async () => {
       loadData(true);
     },
     {
       manual: false,
-      refreshDeps
+      ...props
     }
   );
 

projects/app/src/components/support/permission/MemberManager/MemberModal.tsx

@@ -79,7 +79,10 @@ function MemberModal({
       withOrgs: true,
       status: 'active',
       searchKey
-    }
+    },
+    throttleWait: 500,
+    debounceWait: 200,
+    refreshDeps: [searchKey]
   });
 
   const {
@@ -100,13 +103,6 @@ function MemberModal({
     }
   );
 
-  const search = _.debounce(() => {
-    refreshList();
-    refreshGroups();
-  }, 200);
-
-  useEffect(search, [searchKey]);
-
   const [selectedOrgList, setSelectedOrgIdList] = useState<OrgListItemType[]>([]);
 
   const [selectedMemberList, setSelectedMemberList] = useState<

projects/app/src/pageComponents/account/team/GroupManage/GroupManageMember.tsx

@@ -62,11 +62,11 @@ function GroupEditModal({
       status: 'active',
       withOrgs: true,
       searchKey
-    }
+    },
+    throttleWait: 500,
+    debounceWait: 200,
+    refreshDeps: [searchKey]
   });
-  const refetchMemberList = _.debounce(refreshList, 200);
-
-  useEffect(() => refetchMemberList, [searchKey]);
 
   const groupId = useMemo(() => String(group._id), [group._id]);
 

projects/app/src/pageComponents/account/team/GroupManage/GroupTransferOwnerModal.tsx

@@ -48,14 +48,14 @@ export function ChangeOwnerModal({
     {
       pageSize: 20,
       params: {
-        searchKey: searchKey
-      }
+        searchKey
+      },
+      refreshDeps: [searchKey],
+      debounceWait: 200,
+      throttleWait: 500
     }
   );
 
-  const search = _.debounce(refreshList, 500);
-  useEffect(() => search, [searchKey]);
-
   const {
     isOpen: isOpenMemberListMenu,
     onClose: onCloseMemberListMenu,

projects/app/src/pageComponents/account/team/MemberTable.tsx

@@ -102,17 +102,12 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
       withPermission: true,
       withOrgs: true,
       searchKey
-    }
+    },
+    refreshDeps: [searchKey, status],
+    throttleWait: 500,
+    debounceWait: 200
   });
 
-  const refreshList = _.debounce(() => {
-    refetchMemberList();
-  }, 200);
-
-  useEffect(() => {
-    refreshList();
-  }, [searchKey, status]);
-
   const onRefreshMembers = useCallback(() => {
     refetchMemberList();
   }, [refetchMemberList]);

projects/app/src/pageComponents/account/team/OrgManage/OrgMemberManageModal.tsx

@@ -3,7 +3,6 @@ import { Box, Button, Flex, Grid, HStack, ModalBody, ModalFooter } from '@chakra
 import type { GroupMemberRole } from '@fastgpt/global/support/permission/memberGroup/constant';
 import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import type { IconNameType } from '@fastgpt/web/components/common/Icon/type';
 import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
@@ -31,32 +30,32 @@ function OrgMemberManageModal({
   onClose: () => void;
 }) {
   const { t } = useTranslation();
+  const [searchKey, setSearchKey] = useState('');
 
-  const {
-    data: allMembers,
-    ScrollData: MemberScrollData,
-    isLoading: isLoadingMembers
-  } = useScrollPagination(getTeamMembers, {
+  const { data: allMembers, ScrollData: MemberScrollData } = useScrollPagination(getTeamMembers, {
     pageSize: 20,
     params: {
       withOrgs: true,
       withPermission: false,
-      status: 'active'
-    }
+      status: 'active',
+      searchKey
+    },
+    throttleWait: 500,
+    debounceWait: 200,
+    refreshDeps: [searchKey]
   });
 
-  const {
-    data: orgMembers,
-    ScrollData: OrgMemberScrollData,
-    isLoading: isLoadingOrgMembers
-  } = useScrollPagination(getTeamMembers, {
-    pageSize: 100000,
-    params: {
-      orgId: currentOrg._id,
-      withOrgs: false,
-      withPermission: false
+  const { data: orgMembers, ScrollData: OrgMemberScrollData } = useScrollPagination(
+    getTeamMembers,
+    {
+      pageSize: 100000,
+      params: {
+        orgId: currentOrg._id,
+        withOrgs: false,
+        withPermission: false
+      }
     }
-  });
+  );
 
   const [selected, setSelected] = useState<{ name: string; tmbId: string; avatar: string }[]>([]);
 
@@ -70,8 +69,6 @@ function OrgMemberManageModal({
     );
   }, [orgMembers]);
 
-  const [searchKey, setSearchKey] = useState('');
-
   const { run: onUpdate, loading: isLoadingUpdate } = useRequest2(
     () => {
       return putUpdateOrgMembers({
@@ -147,7 +144,7 @@ function OrgMemberManageModal({
                 setSearchKey(e.target.value);
               }}
             />
-            <MemberScrollData mt={3} flexGrow="1" overflow={'auto'} isLoading={isLoadingMembers}>
+            <MemberScrollData mt={3} flexGrow="1" overflow={'auto'}>
               {allMembers.map((member) => {
                 return (
                   <MemberItemCard
@@ -163,12 +160,7 @@ function OrgMemberManageModal({
             </MemberScrollData>
           </Flex>
           <Flex flexDirection="column" p="4" overflowY="auto" overflowX="hidden">
-            <OrgMemberScrollData
-              mt={3}
-              flexGrow="1"
-              overflow={'auto'}
-              isLoading={isLoadingOrgMembers}
-            >
+            <OrgMemberScrollData mt={3} flexGrow="1" overflow={'auto'}>
               <Box mt={2}>{`${t('common:chosen')}:${selected.length}`}</Box>
               {selected.map((member) => {
                 return (

projects/app/src/pageComponents/account/team/OrgManage/index.tsx

@@ -81,7 +81,7 @@ function OrgTable({ Tabs }: { Tabs: React.ReactNode }) {
   const {
     currentOrg,
     orgs,
-    isLoadingOrgs,
+    isLoading,
     paths,
     onClickOrg,
     members,
@@ -134,18 +134,14 @@ function OrgTable({ Tabs }: { Tabs: React.ReactNode }) {
           />
         </Box>
       </Flex>
-      <MyBox
-        flex={'1 0 0'}
-        h={0}
-        display={'flex'}
-        flexDirection={'column'}
-        isLoading={isLoadingOrgs}
-      >
+      <MyBox flex={'1 0 0'} h={0} display={'flex'} flexDirection={'column'}>
         <Box mb={3}>
-          <Path paths={paths} rootName={userInfo?.team?.teamName} onClick={onPathClick} />
+          {!searchKey && (
+            <Path paths={paths} rootName={userInfo?.team?.teamName} onClick={onPathClick} />
+          )}
         </Box>
         <Flex flex={'1 0 0'} h={0} w={'100%'} gap={'4'}>
-          <MemberScrollData flex="1">
+          <MemberScrollData flex="1" isLoading={isLoading}>
             <TableContainer>
               <Table>
                 <Thead>

projects/app/src/pageComponents/app/detail/PublishHistoriesSlider.tsx

@@ -185,8 +185,7 @@ const TeamCloud = ({
   const {
     ScrollData,
     data: scrollDataList,
-    setData,
-    isLoading
+    setData
   } = useScrollPagination(getWorkflowVersionList, {
     pageSize: 30,
     params: {
@@ -230,7 +229,7 @@ const TeamCloud = ({
   );
 
   return (
-    <ScrollData isLoading={isLoading || isLoadingVersion} flex={'1 0 0'} px={5}>
+    <ScrollData flex={'1 0 0'} px={5} isLoading={isLoadingVersion}>
       {scrollDataList.map((item, index) => {
         const firstPublishedIndex = scrollDataList.findIndex((data) => data.isPublish);
 

projects/app/src/web/support/user/team/org/hooks/useOrg.tsx

@@ -41,14 +41,11 @@ function useOrg({ withPermission = true }: { withPermission?: boolean } = {}) {
     () => getOrgList({ orgId: currentOrg._id, withPermission: withPermission, searchKey }),
     {
       manual: false,
-      refreshDeps: [userInfo?.team?.teamId, path, currentOrg._id]
+      refreshDeps: [userInfo?.team?.teamId, path, currentOrg._id, searchKey],
+      debounceWait: 200,
+      throttleWait: 500
     }
   );
-  const search = _.debounce(() => {
-    if (!searchKey) return;
-    refetchOrgs();
-  }, 200);
-  useEffect(() => search, [searchKey]);
 
   const paths = useMemo(() => {
     if (!currentOrg) return [];
@@ -63,14 +60,19 @@ function useOrg({ withPermission = true }: { withPermission?: boolean } = {}) {
   }, [currentOrg, orgStack]);
 
   const onClickOrg = (org: OrgListItemType) => {
-    setOrgStack([...orgStack, org]);
-    setSearchKey('');
+    if (searchKey) {
+      setOrgStack([org]);
+      setSearchKey('');
+    } else {
+      setOrgStack([...orgStack, org]);
+    }
   };
 
   const {
     data: members = [],
     ScrollData: MemberScrollData,
-    refreshList: refetchMembers
+    refreshList: refetchMembers,
+    isLoading: isLoadingMembers
   } = useScrollPagination(getTeamMembers, {
     pageSize: 20,
     params: {
@@ -106,11 +108,13 @@ function useOrg({ withPermission = true }: { withPermission?: boolean } = {}) {
     ]);
   };
 
+  const isLoading = isLoadingOrgs || isLoadingMembers;
+
   return {
     orgStack,
     currentOrg,
     orgs,
-    isLoadingOrgs,
+    isLoading,
     paths,
     onClickOrg,
     members,