chore: infinite scroller

src/pages/backends/components/backend-list.tsx

@@ -1,5 +1,7 @@
 import CardSkeleton from '@/components/templates/card-skelton';
 import breakpoints from '@/config/breakpoints';
+import InfiniteScroller from '@/pages/_components/infinite-scroller';
+import { useScrollerContext } from '@/pages/_components/infinite-scroller/use-scroller-context';
 import { Col, FloatButton, Row, Spin } from 'antd';
 import _ from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
@@ -72,6 +74,13 @@ const CardList: React.FC<BackendListProps> = (props) => {
     onSelect
   } = props;
   const [span, setSpan] = React.useState(defaultSpan);
+  const {
+    total,
+    current,
+    loading: contextLoading,
+    refresh,
+    throttleDelay
+  } = useScrollerContext();
 
   const getSpanByWidth = (width: number) => {
     if (width < breakpoints.md) return 24;
@@ -89,7 +98,13 @@ const CardList: React.FC<BackendListProps> = (props) => {
   return (
     <div className="relative" style={{ width: '100%' }}>
       <ResizeObserver onResize={handleResize} disabled={!resizable}>
-        <div style={{ width: '100%' }}>
+        <InfiniteScroller
+          total={total}
+          current={current}
+          loading={contextLoading}
+          refresh={refresh}
+          throttleDelay={throttleDelay}
+        >
           <Row gutter={[16, 16]}>
             {dataList.map((item: any) => {
               return (
@@ -100,7 +115,7 @@ const CardList: React.FC<BackendListProps> = (props) => {
             })}
           </Row>
           <ListSkeleton span={span} loading={loading} isFirst={isFirst} />
-        </div>
+        </InfiniteScroller>
       </ResizeObserver>
       <FloatButton.BackTop visibilityHeight={1000} />
     </div>

src/pages/backends/index.tsx

@@ -4,8 +4,10 @@ import { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
+import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
 import _ from 'lodash';
 import { useState } from 'react';
+import { ScrollerContext } from '../_components/infinite-scroller/use-scroller-context';
 import {
   createBackend,
   createBackendFromYAML,
@@ -141,6 +143,13 @@ const BackendList = () => {
     }
   };
 
+  const loadMore = useMemoizedFn((nextPage: number) => {
+    fetchData({
+      ...queryParams,
+      page: nextPage
+    });
+  });
+
   return (
     <PageContainer
       ghost
@@ -170,13 +179,23 @@ const BackendList = () => {
         showSelect={false}
       ></FilterBar>
 
-      <BackendCardList
-        dataList={dataSource.dataList}
-        loading={dataSource.loading}
-        activeId={false}
-        isFirst={!dataSource.loadend}
-        onSelect={handleOnSelect}
-      ></BackendCardList>
+      <ScrollerContext.Provider
+        value={{
+          total: dataSource.totalPage,
+          current: queryParams.page!,
+          loading: dataSource.loading,
+          refresh: loadMore,
+          throttleDelay: 300
+        }}
+      >
+        <BackendCardList
+          dataList={dataSource.dataList}
+          loading={dataSource.loading}
+          activeId={false}
+          isFirst={!dataSource.loadend}
+          onSelect={handleOnSelect}
+        ></BackendCardList>
+      </ScrollerContext.Provider>
       <AddModal
         action={openModalStatus.action}
         onClose={() => setOpenModalStatus({ open: false, action: 'create' })}