fix(message): call onClose after removeNotice (#38669)

* fix: call onClose after removeNotice

* feat: update demo and snapshots

* feat: update test case

components/message/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -45,14 +45,35 @@ exports[`renders ./components/message/demo/info.md extend context correctly 1`]
 `;
 
 exports[`renders ./components/message/demo/loading.md extend context correctly 1`] = `
-<button
-  class="ant-btn ant-btn-default"
-  type="button"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
 >
-  <span>
-    Display a loading indicator
-  </span>
-</button>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Display a loading indicator
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Display a loading and auto hide
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/message/demo/other.md extend context correctly 1`] = `

components/message/__tests__/__snapshots__/demo.test.ts.snap

@@ -45,14 +45,35 @@ exports[`renders ./components/message/demo/info.md correctly 1`] = `
 `;
 
 exports[`renders ./components/message/demo/loading.md correctly 1`] = `
-<button
-  class="ant-btn ant-btn-default"
-  type="button"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
 >
-  <span>
-    Display a loading indicator
-  </span>
-</button>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Display a loading indicator
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Display a loading and auto hide
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/message/demo/other.md correctly 1`] = `

components/message/__tests__/type.test.tsx

@@ -24,8 +24,16 @@ describe('message.typescript', () => {
     );
   });
 
-  it('hide', () => {
-    const hide = message.loading('doing...');
+  it('hide', (done) => {
+    const onClose = jest.fn();
+    const onClose2 = jest.fn();
+    const hide = message.loading('doing...', 0, onClose);
     hide();
+    expect(onClose).toHaveBeenCalled();
+    message.loading('doing', 0.1, onClose2);
+    setTimeout(() => {
+      expect(onClose2).toHaveBeenCalled();
+      done();
+    }, 110);
   });
 });

components/message/demo/loading.md

@@ -14,16 +14,29 @@ title:
 Display a global loading indicator, which is dismissed by itself asynchronously.
 
 ```tsx
-import { Button, message } from 'antd';
+import { Button, message, Space } from 'antd';
 import React from 'react';
 
 const success = () => {
-  const hide = message.loading('Action in progress..', 0);
+  const hide = message.loading('Action in progress..', 0, () => {
+    message.success('loading had closed');
+  });
   // Dismiss manually and asynchronously
   setTimeout(hide, 2500);
 };
 
-const App: React.FC = () => <Button onClick={success}>Display a loading indicator</Button>;
+const success2 = () => {
+  message.loading('Action in progress..', 3, () => {
+    message.success('loading had closed');
+  });
+};
+
+const App: React.FC = () => (
+  <Space>
+    <Button onClick={success}>Display a loading indicator</Button>
+    <Button onClick={success2}>Display a loading and auto hide</Button>
+  </Space>
+);
 
 export default App;
 ```

components/message/index.tsx

@@ -194,6 +194,7 @@ function notice(args: ArgsProps): MessageType {
   const result: any = () => {
     if (messageInstance) {
       messageInstance.removeNotice(target);
+      args.onClose?.();
     }
   };
   result.then = (filled: ThenableArgument, rejected: ThenableArgument) =>