diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index b85f9b50715c..e6a74dbc4bc9 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -2788,7 +2788,7 @@ Array [
     type="button"
   >
     <span>
-      Open
+      Open Drawer
     </span>
   </button>,
   <div
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
index e2dd27b0b6b2..b919f84024e9 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
@@ -265,7 +265,7 @@ exports[`renders components/drawer/demo/loading.tsx correctly 1`] = `
   type="button"
 >
   <span>
-    Open
+    Open Drawer
   </span>
 </button>
 `;
diff --git a/components/drawer/demo/loading.tsx b/components/drawer/demo/loading.tsx
index 6e48c62756b0..1af8c2567761 100644
--- a/components/drawer/demo/loading.tsx
+++ b/components/drawer/demo/loading.tsx
@@ -1,44 +1,36 @@
 import React from 'react';
-import type { DrawerProps } from 'antd';
 import { Button, Drawer } from 'antd';
 
 const App: React.FC = () => {
-  const [open, setOpen] = React.useState(false);
-  const [loading, setLoading] = React.useState<DrawerProps['loading']>(true);
-  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const [open, setOpen] = React.useState<boolean>(false);
+  const [loading, setLoading] = React.useState<boolean>(true);
 
-  const clearTimer = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-  };
-
-  const showDrawer = () => {
+  const showLoading = () => {
     setOpen(true);
     setLoading(true);
-    timerRef.current = setTimeout(() => {
+
+    // Simple loading mock. You should add cleanup logic in real world.
+    setTimeout(() => {
       setLoading(false);
     }, 2000);
   };
 
-  React.useEffect(() => clearTimer, []);
-
   return (
     <>
-      <Button type="primary" onClick={showDrawer}>
-        Open
+      <Button type="primary" onClick={showLoading}>
+        Open Drawer
       </Button>
       <Drawer
+        closable
         destroyOnClose
-        title="Basic Drawer"
+        title={<p>Loading Drawer</p>}
         placement="right"
-        closable={false}
         open={open}
         loading={loading}
         onClose={() => setOpen(false)}
       >
-        <Button type="primary" style={{ marginBottom: 16 }} onClick={() => setLoading(true)}>
-          set Loading true
+        <Button type="primary" style={{ marginBottom: 16 }} onClick={showLoading}>
+          Reload
         </Button>
         <p>Some contents...</p>
         <p>Some contents...</p>