diff --git a/src/components/auto-image/single-image.tsx b/src/components/auto-image/single-image.tsx
index 636cf02e..8f763eba 100644
--- a/src/components/auto-image/single-image.tsx
+++ b/src/components/auto-image/single-image.tsx
@@ -152,6 +152,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                 }}
               >
                 <Spin
+                  size="middle"
                   indicator={<LoadingOutlined style={{ fontSize: 32 }} spin />}
                 />
               </span>
diff --git a/src/components/delete-modal/index.tsx b/src/components/delete-modal/index.tsx
index b22e2117..690723e7 100644
--- a/src/components/delete-modal/index.tsx
+++ b/src/components/delete-modal/index.tsx
@@ -144,7 +144,9 @@ const DeleteModal = forwardRef((props, ref) => {
       onCancel={handleCancel}
       destroyOnHidden={false}
       closeIcon={false}
-      maskClosable={false}
+      mask={{
+        closable: false
+      }}
       keyboard={false}
       width={460}
       styles={{
diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx
index 11043888..d68d664f 100644
--- a/src/components/image-editor/index.tsx
+++ b/src/components/image-editor/index.tsx
@@ -32,7 +32,7 @@ const Loading = (props: { width: number; height: number }) => {
   const { width, height } = props;
   return (
     <LoadWrapper width={width} height={height}>
-      <Spin spinning></Spin>
+      <Spin spinning size="middle"></Spin>
     </LoadWrapper>
   );
 };
diff --git a/src/components/logs-viewer/virtual-log-list.tsx b/src/components/logs-viewer/virtual-log-list.tsx
index 6bf5a563..12ad231f 100644
--- a/src/components/logs-viewer/virtual-log-list.tsx
+++ b/src/components/logs-viewer/virtual-log-list.tsx
@@ -319,6 +319,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
           ></LogsList>
         </div>
         <Spin
+          size="middle"
           spinning={loading}
           className={classNames({
             loading: loading
diff --git a/src/components/scroller-modal/gs-drawer.tsx b/src/components/scroller-modal/gs-drawer.tsx
index d85c9ace..1d7163a9 100644
--- a/src/components/scroller-modal/gs-drawer.tsx
+++ b/src/components/scroller-modal/gs-drawer.tsx
@@ -10,13 +10,7 @@ import React from 'react';
  * @returns
  */
 const ScrollerModal = (props: DrawerProps) => {
-  const {
-    title,
-    closable = true,
-    maskClosable = false,
-    styles,
-    ...restProps
-  } = props;
+  const { title, closable = true, mask, styles, ...restProps } = props;
   const { EscHint } = useEscHint({
     enabled: !props.keyboard && props.open
   });
@@ -48,7 +42,7 @@ const ScrollerModal = (props: DrawerProps) => {
           }
         }}
         closable={false}
-        maskClosable={maskClosable}
+        mask={mask}
         title={
           <div className="flex-between flex-center">
             <span
diff --git a/src/components/seal-table/components/table-row.tsx b/src/components/seal-table/components/table-row.tsx
index bfb79545..a2ed177b 100644
--- a/src/components/seal-table/components/table-row.tsx
+++ b/src/components/seal-table/components/table-row.tsx
@@ -217,7 +217,9 @@ const TableRow: React.FC<
         </div>
         {expanded && !disableExpand && (
           <div className="expanded-row">
-            <Spin spinning={loading}>{renderChildrenData()}</Spin>
+            <Spin spinning={loading} size="middle">
+              {renderChildrenData()}
+            </Spin>
           </div>
         )}
       </div>
diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx
index f91dad45..c483cc4d 100644
--- a/src/components/seal-table/index.tsx
+++ b/src/components/seal-table/index.tsx
@@ -179,7 +179,7 @@ const SealTable: React.FC<SealTableProps & { pagination?: PaginationProps }> = (
             showSorterTooltip={showSorterTooltip}
           ></Header>
         </div>
-        <Spin spinning={loading}>
+        <Spin spinning={loading} size="middle">
           <TableBody
             empty={empty}
             dataSource={props.dataSource}
diff --git a/src/components/short-cuts/index.tsx b/src/components/short-cuts/index.tsx
index 85f4ce1a..0012bfb9 100644
--- a/src/components/short-cuts/index.tsx
+++ b/src/components/short-cuts/index.tsx
@@ -81,7 +81,9 @@ const ShortCuts: React.FC<{ intl: any }> = ({ intl }) => {
 export const modalConfig = {
   icon: null,
   centered: false,
-  maskClosable: true,
+  mask: {
+    closeable: true
+  },
   footer: null,
   style: {
     top: '10%'
@@ -89,4 +91,4 @@ export const modalConfig = {
   width: 700
 };
 
-export default React.memo(ShortCuts);
+export default ShortCuts;
diff --git a/src/components/templates/card-list.tsx b/src/components/templates/card-list.tsx
index 2182c62d..6311b588 100644
--- a/src/components/templates/card-list.tsx
+++ b/src/components/templates/card-list.tsx
@@ -40,11 +40,14 @@ const ListSkeleton: React.FC<{
       {loading && (
         <SpinWrapper>
           <Spin
+            size="middle"
             spinning={loading}
             style={{
               width: '100%'
             }}
-            wrapperClassName="skelton-wrapper"
+            classNames={{
+              root: 'skelton-wrapper'
+            }}
           >
             {isFirst && <CardSkeleton></CardSkeleton>}
           </Spin>
diff --git a/src/components/version-info/index.tsx b/src/components/version-info/index.tsx
index f7aa2720..62657567 100644
--- a/src/components/version-info/index.tsx
+++ b/src/components/version-info/index.tsx
@@ -87,7 +87,9 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
 export const modalConfig = {
   icon: null,
   centered: false,
-  maskClosable: true,
+  mask: {
+    closeable: true
+  },
   footer: null,
   style: {
     top: '30%'
diff --git a/src/pages/backends/components/backend-list.tsx b/src/pages/backends/components/backend-list.tsx
index d088fa45..573474a2 100644
--- a/src/pages/backends/components/backend-list.tsx
+++ b/src/pages/backends/components/backend-list.tsx
@@ -57,10 +57,13 @@ const ListSkeleton: React.FC<{
         <SpinWrapper>
           <Spin
             spinning={loading}
+            size="middle"
             style={{
               width: '100%'
             }}
-            wrapperClassName="skelton-wrapper"
+            classNames={{
+              root: 'skelton-wrapper'
+            }}
           >
             {isFirst && (
               <SkeletonWrapper>
diff --git a/src/pages/cluster-management/components/add-worker/select-cluster.tsx b/src/pages/cluster-management/components/add-worker/select-cluster.tsx
index c266e42f..708c96b9 100644
--- a/src/pages/cluster-management/components/add-worker/select-cluster.tsx
+++ b/src/pages/cluster-management/components/add-worker/select-cluster.tsx
@@ -79,7 +79,7 @@ const SelectCluster: React.FC<AddWorkerStepProps> = ({ disabled }) => {
         </div>
       }
     >
-      <Spin spinning={clusterLoading}>
+      <Spin spinning={clusterLoading} size="middle">
         <BaseSelect
           defaultValue={registrationInfo.cluster_id}
           options={clusterList}
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 5695a7ae..f95b3bf6 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -18,7 +18,7 @@ const Dashboard: React.FC = () => {
   return (
     <DashboardContext.Provider value={{ ...data, fetchData: fetchData }}>
       <PageBox>
-        <Spin spinning={loading} style={{ minHeight: 300 }}>
+        <Spin spinning={loading} style={{ minHeight: 300 }} size="middle">
           <DashboardInner />
         </Spin>
       </PageBox>
diff --git a/src/pages/llmodels/components/catalog/catalog-list.tsx b/src/pages/llmodels/components/catalog/catalog-list.tsx
index 75c77271..2ba2a2a3 100644
--- a/src/pages/llmodels/components/catalog/catalog-list.tsx
+++ b/src/pages/llmodels/components/catalog/catalog-list.tsx
@@ -37,6 +37,7 @@ const ListSkeleton: React.FC<{
         <SpinWrapper>
           <Spin
             spinning={loading}
+            size="middle"
             style={{
               width: '100%'
             }}
diff --git a/src/pages/llmodels/components/deployment/deploy-modal.tsx b/src/pages/llmodels/components/deployment/deploy-modal.tsx
index 5311287c..61e99663 100644
--- a/src/pages/llmodels/components/deployment/deploy-modal.tsx
+++ b/src/pages/llmodels/components/deployment/deploy-modal.tsx
@@ -472,6 +472,9 @@ const AddModal: FC<AddModalProps> = (props) => {
   };
 
   const handleOnOpen = async () => {
+    await new Promise((resolve) => {
+      setTimeout(resolve, 100);
+    });
     const [backendOptions, gpuOptions] = await Promise.all([
       form.current?.getBackendOptions?.({
         cluster_id: initClusterId()
diff --git a/src/pages/llmodels/components/model-source/hf-model-file.tsx b/src/pages/llmodels/components/model-source/hf-model-file.tsx
index 526177bd..a5ab148d 100644
--- a/src/pages/llmodels/components/model-source/hf-model-file.tsx
+++ b/src/pages/llmodels/components/model-source/hf-model-file.tsx
@@ -321,6 +321,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
         <div className="spin-wrapper">
           <Spin
             spinning={dataSource.loading}
+            size="middle"
             style={{ height: '100%', width: '100%' }}
           ></Spin>
         </div>
diff --git a/src/pages/login/components/login-form.tsx b/src/pages/login/components/login-form.tsx
index ac3cde04..391ba5fc 100644
--- a/src/pages/login/components/login-form.tsx
+++ b/src/pages/login/components/login-form.tsx
@@ -241,7 +241,10 @@ const LoginForm = () => {
           <SpinContainer>
             {renderWelCome()}
             <div className="spin">
-              <Spin tip={intl.formatMessage({ id: 'common.login.auth' })}>
+              <Spin
+                tip={intl.formatMessage({ id: 'common.login.auth' })}
+                size="middle"
+              >
                 <div style={{ width: 300 }}></div>
               </Spin>
             </div>
diff --git a/src/pages/playground/embedding/page.tsx b/src/pages/playground/embedding/page.tsx
index 9e6d11e7..0cafcfbb 100644
--- a/src/pages/playground/embedding/page.tsx
+++ b/src/pages/playground/embedding/page.tsx
@@ -671,7 +671,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
                   alignItems: 'center'
                 }}
               >
-                <Spin spinning={true}></Spin>
+                <Spin spinning={true} size="middle"></Spin>
               </div>
             )}
             <ResizeContainer
diff --git a/src/pages/playground/video/page.tsx b/src/pages/playground/video/page.tsx
index 1646c701..09e8c7e5 100644
--- a/src/pages/playground/video/page.tsx
+++ b/src/pages/playground/video/page.tsx
@@ -183,6 +183,7 @@ const GroundVideo: React.FC<MessageProps> = forwardRef((props, ref) => {
                 >
                   <Spin
                     spinning={loading}
+                    size="middle"
                     styles={{
                       root: {
                         height: '100%'