demo: update Drawer demo (#48831)

components/drawer/demo/loading.tsx

@@ -1,48 +1,45 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import type { DrawerProps } from 'antd';
 import { Button, Drawer } from 'antd';
 
 const App: React.FC = () => {
-  const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState<DrawerProps['loading']>(true);
-  let id: NodeJS.Timer;
+  const [open, setOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState<DrawerProps['loading']>(true);
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
 
-  const showDrawer = () => {
-    setOpen(true);
-  };
-
-  const onClose = () => {
-    setOpen(false);
-    clearTimeout(Number(id));
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
   };
 
-  useEffect(() => {
+  const showDrawer = () => {
+    setOpen(true);
     setLoading(true);
-  }, []);
+    timerRef.current = setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  };
 
-  useEffect(() => {
-    if (open) {
-      id = setTimeout(() => {
-        setLoading(false);
-      }, 1000);
-    }
-  }, [open]);
+  React.useEffect(() => clearTimer, []);
 
   return (
     <>
       <Button type="primary" onClick={showDrawer}>
         Open
       </Button>
       <Drawer
+        destroyOnClose
         title="Basic Drawer"
         placement="right"
         closable={false}
-        onClose={onClose}
         open={open}
         loading={loading}
-        afterOpenChange={(visible) => !visible && setLoading(true)}
+        onClose={() => setOpen(false)}
       >
-        <Button onClick={() => setLoading(true)}>set Loading true</Button>
+        <Button type="primary" style={{ marginBottom: 16 }} onClick={() => setLoading(true)}>
+          set Loading true
+        </Button>
         <p>Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>

components/drawer/index.en-US.md

@@ -22,7 +22,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 <!-- prettier-ignore -->
 <code src="./demo/basic-right.tsx">Basic</code>
 <code src="./demo/placement.tsx">Custom Placement</code>
-<code src="./demo/loading.tsx">Loading</code>
+<code src="./demo/loading.tsx" version="5.17.0">Loading</code>
 <code src="./demo/extra.tsx">Extra Actions</code>
 <code src="./demo/render-in-current.tsx">Render in current dom</code>
 <code src="./demo/form-in-drawer.tsx">Submit form in drawer</code>

components/drawer/index.zh-CN.md

@@ -22,7 +22,7 @@ demo:
 <!-- prettier-ignore -->
 <code src="./demo/basic-right.tsx">基础抽屉</code>
 <code src="./demo/placement.tsx">自定义位置</code>
-<code src="./demo/loading.tsx">加载中</code>
+<code src="./demo/loading.tsx" version="5.17.0">加载中</code>
 <code src="./demo/extra.tsx">额外操作</code>
 <code src="./demo/render-in-current.tsx">渲染在当前 DOM</code>
 <code src="./demo/form-in-drawer.tsx">抽屉表单</code>