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

* pref: useScrollPagination support debounce and throttle. * fix: useScrollPagination loading * fix: isloading * fix: org search path hide
2025-07-23 05:12:39 +00:00 · 2025-03-27 15:58:13 +08:00
parent 8b29aae238
commit e9f75c7e66
9 changed files with 68 additions and 87 deletions
--- a/packages/web/hooks/useScrollPagination.tsx
+++ b/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
    }
  );

--- a/projects/app/src/components/support/permission/MemberManager/MemberModal.tsx
+++ b/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<
--- a/projects/app/src/pageComponents/account/team/GroupManage/GroupManageMember.tsx
+++ b/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]);

--- a/projects/app/src/pageComponents/account/team/GroupManage/GroupTransferOwnerModal.tsx
+++ b/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,
--- a/projects/app/src/pageComponents/account/team/MemberTable.tsx
+++ b/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]);
--- a/projects/app/src/pageComponents/account/team/OrgManage/OrgMemberManageModal.tsx
+++ b/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, {
+  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 (
--- a/projects/app/src/pageComponents/account/team/OrgManage/index.tsx
+++ b/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}>
+          {!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>
--- a/projects/app/src/pageComponents/app/detail/PublishHistoriesSlider.tsx
+++ b/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);

--- a/projects/app/src/web/support/user/team/org/hooks/useOrg.tsx
+++ b/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]);
+    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,