diff --git a/packages/amis-ui/scss/components/_spinner.scss b/packages/amis-ui/scss/components/_spinner.scss
index 696f4c9d6c8..f7d0fd7ef67 100644
--- a/packages/amis-ui/scss/components/_spinner.scss
+++ b/packages/amis-ui/scss/components/_spinner.scss
@@ -30,6 +30,10 @@
     opacity: 1;
   }
 
+  &.ing {
+    opacity: 0;
+  }
+
   .#{$ns}Spinner-icon {
     width: var(--Spinner-width);
     height: var(--Spinner-height);
diff --git a/packages/amis-ui/src/components/Spinner.tsx b/packages/amis-ui/src/components/Spinner.tsx
index 6d48183eb09..eab79166d88 100644
--- a/packages/amis-ui/src/components/Spinner.tsx
+++ b/packages/amis-ui/src/components/Spinner.tsx
@@ -17,7 +17,7 @@ const fadeStyles: {
   [propName: string]: string;
 } = {
   [ENTERED]: 'in',
-  [ENTERING]: 'in'
+  [ENTERING]: 'ing'
 };
 
 // Spinner Props
@@ -199,7 +199,11 @@ export class Spinner extends React.Component<
     // 定义了挂载位置时只能使用默认icon
     const icon = loadingConfig?.root ? undefined : iconConfig;
     const isCustomIcon = icon && React.isValidElement(icon);
-    const timeout = {enter: delay, exit: 0};
+    const timeout = {
+      appear: delay,
+      enter: delay,
+      exit: 0
+    };
 
     const showOverlay = loadingConfig?.root || overlay;
 
@@ -213,6 +217,7 @@ export class Spinner extends React.Component<
           unmountOnExit
           in={this.state.spinning}
           timeout={timeout}
+          appear={this.state.spinning}
         >
           {(status: string) => {
             return (
diff --git a/packages/amis/__tests__/event-action/__snapshots__/drawer.test.tsx.snap b/packages/amis/__tests__/event-action/__snapshots__/drawer.test.tsx.snap
index b19a495ca4f..86e4247d873 100644
--- a/packages/amis/__tests__/event-action/__snapshots__/drawer.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/__snapshots__/drawer.test.tsx.snap
@@ -64,10 +64,10 @@ exports[`EventAction:drawer 1`] = `
         class="cxd-Drawer-body"
       >
         <div
-          class="cxd-Spinner-overlay in"
+          class="cxd-Spinner-overlay ing"
         />
         <div
-          class="cxd-Spinner cxd-Spinner--overlay in"
+          class="cxd-Spinner cxd-Spinner--overlay ing"
           data-testid="spinner"
         >
           <div
@@ -344,10 +344,10 @@ exports[`EventAction:drawer args 1`] = `
         class="cxd-Drawer-body"
       >
         <div
-          class="cxd-Spinner-overlay in"
+          class="cxd-Spinner-overlay ing"
         />
         <div
-          class="cxd-Spinner cxd-Spinner--overlay in"
+          class="cxd-Spinner cxd-Spinner--overlay ing"
           data-testid="spinner"
         >
           <div
@@ -530,32 +530,4 @@ exports[`EventAction:drawer args 6`] = `
 </div>
 `;
 
-exports[`EventAction:drawer args 7`] = `
-<div>
-  <div
-    class="cxd-Page"
-  >
-    <div
-      class="cxd-Page-content"
-    >
-      <div
-        class="cxd-Page-main"
-      >
-        <div
-          class="cxd-Page-body"
-          role="page-body"
-        >
-          <button
-            class="cxd-Button cxd-Button--default cxd-Button--size-default"
-            type="button"
-          >
-            <span>
-              打开抽屉
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
+exports[`EventAction:drawer args 7`] = `<div />`;
diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
index c6ebf2d0f80..4a107448ed1 100644
--- a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
@@ -248,10 +248,10 @@ exports[`doAction:crud reload 1`] = `
                   </table>
                 </div>
                 <div
-                  class="cxd-Spinner-overlay in"
+                  class="cxd-Spinner-overlay ing"
                 />
                 <div
-                  class="cxd-Spinner cxd-Spinner--overlay in"
+                  class="cxd-Spinner cxd-Spinner--overlay ing"
                   data-testid="spinner"
                 >
                   <div
@@ -555,10 +555,10 @@ exports[`doAction:crud reload with data1 1`] = `
                   </table>
                 </div>
                 <div
-                  class="cxd-Spinner-overlay in"
+                  class="cxd-Spinner-overlay ing"
                 />
                 <div
-                  class="cxd-Spinner cxd-Spinner--overlay in"
+                  class="cxd-Spinner cxd-Spinner--overlay ing"
                   data-testid="spinner"
                 >
                   <div
@@ -862,10 +862,10 @@ exports[`doAction:crud reload with data2 1`] = `
                   </table>
                 </div>
                 <div
-                  class="cxd-Spinner-overlay in"
+                  class="cxd-Spinner-overlay ing"
                 />
                 <div
-                  class="cxd-Spinner cxd-Spinner--overlay in"
+                  class="cxd-Spinner cxd-Spinner--overlay ing"
                   data-testid="spinner"
                 >
                   <div
diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/page.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/page.test.tsx.snap
index c957494cda4..989c87cbfeb 100644
--- a/packages/amis/__tests__/event-action/renderers/__snapshots__/page.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/page.test.tsx.snap
@@ -116,10 +116,10 @@ exports[`doAction:page reload 2`] = `
           role="page-body"
         >
           <div
-            class="cxd-Spinner-overlay in"
+            class="cxd-Spinner-overlay ing"
           />
           <div
-            class="cxd-Spinner cxd-Spinner--overlay in"
+            class="cxd-Spinner cxd-Spinner--overlay ing"
             data-testid="spinner"
           >
             <div
@@ -327,10 +327,10 @@ exports[`doAction:page reload with data 2`] = `
           role="page-body"
         >
           <div
-            class="cxd-Spinner-overlay in"
+            class="cxd-Spinner-overlay ing"
           />
           <div
-            class="cxd-Spinner cxd-Spinner--overlay in"
+            class="cxd-Spinner cxd-Spinner--overlay ing"
             data-testid="spinner"
           >
             <div
diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap
index 71984e89fa2..3a780fd419e 100644
--- a/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap
@@ -405,10 +405,10 @@ exports[`doAction:service reload 2`] = `
               </div>
             </div>
             <div
-              class="cxd-Spinner-overlay in"
+              class="cxd-Spinner-overlay ing"
             />
             <div
-              class="cxd-Spinner cxd-Spinner--overlay in"
+              class="cxd-Spinner cxd-Spinner--overlay ing"
               data-testid="spinner"
             >
               <div
@@ -624,10 +624,10 @@ exports[`doAction:service reload with data 2`] = `
               </div>
             </div>
             <div
-              class="cxd-Spinner-overlay in"
+              class="cxd-Spinner-overlay ing"
             />
             <div
-              class="cxd-Spinner cxd-Spinner--overlay in"
+              class="cxd-Spinner cxd-Spinner--overlay ing"
               data-testid="spinner"
             >
               <div
@@ -843,10 +843,10 @@ exports[`doAction:service(schemaApi) reload 2`] = `
               </div>
             </div>
             <div
-              class="cxd-Spinner-overlay in"
+              class="cxd-Spinner-overlay ing"
             />
             <div
-              class="cxd-Spinner cxd-Spinner--overlay in"
+              class="cxd-Spinner cxd-Spinner--overlay ing"
               data-testid="spinner"
             >
               <div
@@ -1062,10 +1062,10 @@ exports[`doAction:service(schemaApi) reload with data 2`] = `
               </div>
             </div>
             <div
-              class="cxd-Spinner-overlay in"
+              class="cxd-Spinner-overlay ing"
             />
             <div
-              class="cxd-Spinner cxd-Spinner--overlay in"
+              class="cxd-Spinner cxd-Spinner--overlay ing"
               data-testid="spinner"
             >
               <div
@@ -1281,10 +1281,10 @@ exports[`doAction:service(schemaApi+data) reload with data 2`] = `
               </div>
             </div>
             <div
-              class="cxd-Spinner-overlay in"
+              class="cxd-Spinner-overlay ing"
             />
             <div
-              class="cxd-Spinner cxd-Spinner--overlay in"
+              class="cxd-Spinner cxd-Spinner--overlay ing"
               data-testid="spinner"
             >
               <div
diff --git a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap
index 84d0f4fe9ef..ce6c51fcbfc 100644
--- a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap
@@ -631,10 +631,10 @@ exports[`doAction:form reset 1`] = `
                   type="submit"
                 />
                 <div
-                  class="cxd-Spinner-overlay in"
+                  class="cxd-Spinner-overlay ing"
                 />
                 <div
-                  class="cxd-Spinner cxd-Spinner--overlay in"
+                  class="cxd-Spinner cxd-Spinner--overlay ing"
                   data-testid="spinner"
                 >
                   <div
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/chainedSelect.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/chainedSelect.test.tsx.snap
index d69bbdb5392..c7d9be5a0ed 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/chainedSelect.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/chainedSelect.test.tsx.snap
@@ -284,7 +284,7 @@ exports[`Renderer:chained-select 1`] = `
               </span>
             </div>
             <div
-              class="cxd-Spinner in cxd-ChainedSelectControl-spinner"
+              class="cxd-Spinner ing cxd-ChainedSelectControl-spinner"
               data-testid="spinner"
             >
               <div
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Nav.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Nav.test.tsx.snap
index 93653955bb8..780fdfcb065 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Nav.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Nav.test.tsx.snap
@@ -746,10 +746,10 @@ exports[`Renderer:Nav with itemActions 1`] = `
               />
             </div>
             <div
-              class="cxd-Spinner-overlay in"
+              class="cxd-Spinner-overlay ing"
             />
             <div
-              class="cxd-Spinner cxd-Spinner--overlay in"
+              class="cxd-Spinner cxd-Spinner--overlay ing"
               data-testid="spinner"
             >
               <div
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
index 648254328bc..27743b1612a 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
@@ -702,10 +702,10 @@ exports[`Renderer:Page handleAction actionType=drawer default 1`] = `
         class="cxd-Drawer-body"
       >
         <div
-          class="cxd-Spinner-overlay in"
+          class="cxd-Spinner-overlay ing"
         />
         <div
-          class="cxd-Spinner cxd-Spinner--overlay in"
+          class="cxd-Spinner cxd-Spinner--overlay ing"
           data-testid="spinner"
         >
           <div
@@ -1834,10 +1834,10 @@ exports[`Renderer:Page initApi show loading 1`] = `
           role="page-body"
         >
           <div
-            class="cxd-Spinner-overlay in"
+            class="cxd-Spinner-overlay ing"
           />
           <div
-            class="cxd-Spinner cxd-Spinner--overlay in"
+            class="cxd-Spinner cxd-Spinner--overlay ing"
             data-testid="spinner"
           >
             <div
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
index 7b22b31b9a5..36a09c561ac 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
@@ -2294,10 +2294,10 @@ exports[`Renderer:Wizard initApi show loading 1`] = `
       />
     </div>
     <div
-      class="cxd-Spinner-overlay in"
+      class="cxd-Spinner-overlay ing"
     />
     <div
-      class="cxd-Spinner cxd-Spinner--overlay in"
+      class="cxd-Spinner cxd-Spinner--overlay ing"
       data-testid="spinner"
     >
       <div