fix: delay querying backends

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>

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={{

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>
   );
 };

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

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

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>

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}

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;

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>

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%'