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>