chore: catalog: scroll to load more data

src/pages/llmodels/components/catalog-list.tsx

@@ -3,10 +3,23 @@ import { Col, FloatButton, Row, Spin } from 'antd';
 import _ from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
 import React, { useCallback } from 'react';
+import styled from 'styled-components';
 import { CatalogItem as CatalogItemType } from '../config/types';
 import CatalogItem from './catalog-item';
 import CatalogSkelton from './catalog-skelton';
 
+const SpinWrapper = styled.div`
+  width: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  height: 400px;
+  right: 0;
+`;
+
 interface CatalogListProps {
   dataList: any[];
   loading: boolean;
@@ -23,19 +36,7 @@ const ListSkeleton: React.FC<{
   return (
     <div>
       {loading && (
-        <div
-          style={{
-            width: '100%',
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'flex-start',
-            justifyContent: 'center',
-            top: 0,
-            left: 0,
-            height: 400,
-            right: 0
-          }}
-        >
+        <SpinWrapper>
           <Spin
             spinning={loading}
             style={{
@@ -45,7 +46,7 @@ const ListSkeleton: React.FC<{
           >
             {isFirst && <CatalogSkelton span={span}></CatalogSkelton>}
           </Spin>
-        </div>
+        </SpinWrapper>
       )}
     </div>
   );

src/pages/llmodels/components/update-modal.tsx

@@ -91,7 +91,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     return undefined;
   };
 
-  const handleOnValuesChange = (data: any) => {
+  const handleOnValuesChange = _.debounce((data: any) => {
     const formdata = form.getFieldsValue?.();
 
     let alldata = {};
@@ -116,7 +116,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     }
 
     const originalData = _.pick(originFormData.current, Object.keys(alldata));
-    console.log('alldata:', alldata, originalData);
+    console.log('alldata:', formdata, alldata, originalData);
 
     const isEqual = _.isEqualWith(
       _.omit(alldata, updateIgnoreFields),
@@ -137,7 +137,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
         })
       });
     }
-  };
+  }, 100);
 
   // voxbox is not support multi gpu
   const handleSetGPUIds = (backend: string) => {