perf scroll components (#2676)

* perf: add scroll list && virtualist (#2665)

* perf: chatHistorySlider add virtualList

* perf: dataCard add scroll

* fix: ts

* perf: scroll list components

* perf: hook refresh

---------

Co-authored-by: papapatrick <109422393+Patrickill@users.noreply.github.com>

packages/web/hooks/usePagination.tsx

@@ -1,13 +1,17 @@
-import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import { IconButton, Flex, Box, Input } from '@chakra-ui/react';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { IconButton, Flex, Box, Input, BoxProps } from '@chakra-ui/react';
 import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
-import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
-import { throttle } from 'lodash';
 import { useToast } from './useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
-
-const thresholdVal = 100;
+import {
+  useBoolean,
+  useLockFn,
+  useMemoizedFn,
+  useRequest,
+  useScroll,
+  useThrottleEffect
+} from 'ahooks';
 
 type PagingData<T> = {
   pageNum: number;
@@ -23,7 +27,7 @@ export function usePagination<ResT = any>({
   defaultRequest = true,
   type = 'button',
   onChange,
-  elementRef
+  refreshDeps
 }: {
   api: (data: any) => Promise<PagingData<ResT>>;
   pageSize?: number;
@@ -31,46 +35,59 @@ export function usePagination<ResT = any>({
   defaultRequest?: boolean;
   type?: 'button' | 'scroll';
   onChange?: (pageNum: number) => void;
-  elementRef?: React.RefObject<HTMLDivElement>;
+  refreshDeps?: any[];
 }) {
   const { toast } = useToast();
   const { t } = useTranslation();
   const [pageNum, setPageNum] = useState(1);
-  const pageNumRef = useRef(pageNum);
-  pageNumRef.current = pageNum;
+
+  const ScrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const noMore = useRef(false);
+
+  const [isLoading, { setTrue, setFalse }] = useBoolean(false);
+
   const [total, setTotal] = useState(0);
-  const totalRef = useRef(total);
-  totalRef.current = total;
   const [data, setData] = useState<ResT[]>([]);
-  const dataLengthRef = useRef(data.length);
-  dataLengthRef.current = data.length;
+
   const maxPage = useMemo(() => Math.ceil(total / pageSize) || 1, [pageSize, total]);
 
-  const { mutate, isLoading } = useMutation({
-    mutationFn: async (num: number = pageNum) => {
-      try {
-        const res: PagingData<ResT> = await api({
-          pageNum: num,
-          pageSize,
-          ...params
-        });
-        setPageNum(num);
-        res.total !== undefined && setTotal(res.total);
-        if (type === 'scroll') {
-          setData((prevData) => [...prevData, ...res.data]);
-        } else {
-          setData(res.data);
-        }
-        onChange && onChange(num);
-      } catch (error: any) {
-        toast({
-          title: getErrText(error, t('common:core.chat.error.data_error')),
-          status: 'error'
-        });
-        console.log(error);
+  const fetchData = useLockFn(async (num: number = pageNum) => {
+    if (noMore.current && num !== 1) return;
+    setTrue();
+
+    try {
+      const res: PagingData<ResT> = await api({
+        pageNum: num,
+        pageSize,
+        ...params
+      });
+
+      // Check total and set
+      res.total !== undefined && setTotal(res.total);
+
+      if (res.total !== undefined && res.total <= data.length + res.data.length) {
+        noMore.current = true;
       }
-      return null;
+
+      setPageNum(num);
+
+      if (type === 'scroll') {
+        setData((prevData) => (num === 1 ? res.data : [...prevData, ...res.data]));
+      } else {
+        setData(res.data);
+      }
+
+      onChange?.(num);
+    } catch (error: any) {
+      toast({
+        title: getErrText(error, t('common:core.chat.error.data_error')),
+        status: 'error'
+      });
+      console.log(error);
     }
+
+    setFalse();
   });
 
   const Pagination = useCallback(() => {
@@ -82,7 +99,7 @@ export function usePagination<ResT = any>({
           aria-label={'left'}
           size={'smSquare'}
           isLoading={isLoading}
-          onClick={() => mutate(pageNum - 1)}
+          onClick={() => fetchData(pageNum - 1)}
         />
         <Flex mx={2} alignItems={'center'}>
           <Input
@@ -97,11 +114,11 @@ export function usePagination<ResT = any>({
               const val = +e.target.value;
               if (val === pageNum) return;
               if (val >= maxPage) {
-                mutate(maxPage);
+                fetchData(maxPage);
               } else if (val < 1) {
-                mutate(1);
+                fetchData(1);
               } else {
-                mutate(+e.target.value);
+                fetchData(+e.target.value);
               }
             }}
             onKeyDown={(e) => {
@@ -110,11 +127,11 @@ export function usePagination<ResT = any>({
               if (val && e.key === 'Enter') {
                 if (val === pageNum) return;
                 if (val >= maxPage) {
-                  mutate(maxPage);
+                  fetchData(maxPage);
                 } else if (val < 1) {
-                  mutate(1);
+                  fetchData(1);
                 } else {
-                  mutate(val);
+                  fetchData(val);
                 }
               }
             }}
@@ -130,22 +147,35 @@ export function usePagination<ResT = any>({
           isLoading={isLoading}
           w={'28px'}
           h={'28px'}
-          onClick={() => mutate(pageNum + 1)}
+          onClick={() => fetchData(pageNum + 1)}
         />
       </Flex>
     );
-  }, [isLoading, maxPage, mutate, pageNum]);
+  }, [isLoading, maxPage, fetchData, pageNum]);
 
-  const ScrollData = useCallback(
-    ({ children, ...props }: { children: React.ReactNode }) => {
-      const loadText = useMemo(() => {
+  // Reload data
+  const { runAsync: refresh } = useRequest(
+    async () => {
+      setData([]);
+      defaultRequest && fetchData(1);
+    },
+    {
+      manual: false,
+      refreshDeps,
+      throttleWait: 100
+    }
+  );
+
+  const ScrollData = useMemoizedFn(
+    ({ children, ...props }: { children: React.ReactNode } & BoxProps) => {
+      const loadText = (() => {
         if (isLoading) return t('common:common.is_requesting');
         if (total <= data.length) return t('common:common.request_end');
         return t('common:common.request_more');
-      }, []);
+      })();
 
       return (
-        <Box {...props} ref={elementRef} overflow={'overlay'}>
+        <Box {...props} ref={ScrollContainerRef} overflow={'overlay'}>
           {children}
           <Box
             mt={2}
@@ -155,51 +185,29 @@ export function usePagination<ResT = any>({
             cursor={loadText === t('common:common.request_more') ? 'pointer' : 'default'}
             onClick={() => {
               if (loadText !== t('common:common.request_more')) return;
-              mutate(pageNum + 1);
+              fetchData(pageNum + 1);
             }}
           >
             {loadText}
           </Box>
         </Box>
       );
-    },
-    [data.length, isLoading, mutate, pageNum, total]
+    }
   );
 
-  useEffect(() => {
-    if (!elementRef?.current || type !== 'scroll') return;
-
-    const scrolling = throttle((e: Event) => {
-      const element = e.target as HTMLDivElement;
-      if (!element) return;
-      // 当前滚动位置
-      const scrollTop = element.scrollTop;
-      // 可视高度
-      const clientHeight = element.clientHeight;
-      // 内容总高度
-      const scrollHeight = element.scrollHeight;
-      // 判断是否滚动到底部
-      if (
-        scrollTop + clientHeight + thresholdVal >= scrollHeight &&
-        dataLengthRef.current < totalRef.current
-      ) {
-        mutate(pageNumRef.current + 1);
+  // Scroll check
+  const scroll = useScroll(ScrollContainerRef);
+  useThrottleEffect(
+    () => {
+      if (!ScrollContainerRef?.current || type !== 'scroll' || total === 0) return;
+      const { scrollTop, scrollHeight, clientHeight } = ScrollContainerRef.current;
+      if (scrollTop + clientHeight >= scrollHeight - 100) {
+        fetchData(pageNum + 1);
       }
-    }, 100);
-
-    const handleScroll = (e: Event) => {
-      scrolling(e);
-    };
-
-    elementRef.current.addEventListener('scroll', handleScroll);
-    return () => {
-      elementRef.current?.removeEventListener('scroll', handleScroll);
-    };
-  }, [elementRef, mutate, pageNum, type, total, data.length]);
-
-  useEffect(() => {
-    defaultRequest && mutate(1);
-  }, []);
+    },
+    [scroll],
+    { wait: 50 }
+  );
 
   return {
     pageNum,
@@ -210,6 +218,7 @@ export function usePagination<ResT = any>({
     isLoading,
     Pagination,
     ScrollData,
-    getData: mutate
+    getData: fetchData,
+    refresh
   };
 }

packages/web/hooks/useScrollPagination.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState } from 'react';
 import { Box, BoxProps } from '@chakra-ui/react';
 import { useToast } from './useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
@@ -9,11 +9,14 @@ import {
   useMemoizedFn,
   useScroll,
   useVirtualList,
-  useRequest
+  useRequest,
+  useThrottleEffect
 } from 'ahooks';
 import MyBox from '../components/common/MyBox';
 import { useTranslation } from 'next-i18next';
 
+type ItemHeight<T> = (index: number, data: T) => number;
+
 export type ScrollListType = ({
   children,
   EmptyChildren,
@@ -31,8 +34,6 @@ export function useScrollPagination<
 >(
   api: (data: TParams) => Promise<TData>,
   {
-    debounceWait,
-    throttleWait,
     refreshDeps,
     itemHeight = 50,
     overscan = 10,
@@ -40,11 +41,9 @@ export function useScrollPagination<
     pageSize = 10,
     defaultParams = {}
   }: {
-    debounceWait?: number;
-    throttleWait?: number;
     refreshDeps?: any[];
 
-    itemHeight: number;
+    itemHeight: number | ItemHeight<TData['list'][0]>;
     overscan?: number;
 
     pageSize?: number;
@@ -123,43 +122,56 @@ export function useScrollPagination<
       isLoading?: boolean;
     } & BoxProps) => {
       return (
-        <>
-          <MyBox isLoading={isLoading} ref={containerRef} overflow={'overlay'} {...props}>
-            <Box ref={wrapperRef}>{children}</Box>
+        <MyBox isLoading={isLoading} ref={containerRef} overflow={'overlay'} {...props}>
+          <Box ref={wrapperRef}>
+            {children}
             {noMore.current && list.length > 0 && (
               <Box py={4} textAlign={'center'} color={'myGray.600'} fontSize={'xs'}>
                 {t('common:common.No more data')}
               </Box>
             )}
-            {list.length === 0 && !isLoading && EmptyChildren && <>{EmptyChildren}</>}
-          </MyBox>
-        </>
+          </Box>
+
+          {list.length === 0 && !isLoading && EmptyChildren && <>{EmptyChildren}</>}
+        </MyBox>
       );
     }
   );
 
-  useRequest(() => loadData(1), {
-    refreshDeps,
-    debounceWait: data.length === 0 ? 0 : debounceWait,
-    throttleWait
-  });
-
-  const scroll = useScroll(containerRef);
-  useEffect(() => {
-    if (!containerRef.current || list.length === 0) return;
-
-    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-
-    if (scrollTop + clientHeight >= scrollHeight - 100) {
-      loadData(current + 1);
+  // Reload data
+  useRequest(
+    async () => {
+      console.log('reload', 11111);
+      loadData(1);
+    },
+    {
+      manual: false,
+      refreshDeps
     }
-  }, [scroll]);
+  );
+
+  // Check if scroll to bottom
+  const scroll = useScroll(containerRef);
+  useThrottleEffect(
+    () => {
+      if (!containerRef.current || list.length === 0) return;
+      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+      console.log('=======', 111111);
+      if (scrollTop + clientHeight >= scrollHeight - 100) {
+        loadData(current + 1);
+      }
+    },
+    [scroll],
+    {
+      wait: 50
+    }
+  );
 
   return {
     containerRef,
-    list,
+    scrollDataList: list,
     total,
-    data,
+    totalData: data,
     setData,
     isLoading,
     ScrollList,