Drawer 打开一个很卡的页面，会卡住没有任何反应需要子页面渲染完了才会展开。

[echoyl]

Reproduction link

Steps to reproduce

点击open按钮，大概过个3秒才会展开

What is expected?

可以先展开drawer然后里面loading，渲染好了后再展示内容。

What is actually happening?

卡住了

Environment	Info
antd	5.20.5
React	18.3.1
System	windows
Browser	chrome版本 113.0.5672.127（正式版本） （64 位）

---

如果使用自带loading属性，貌似也是设置了false后子组件才会真正开始渲染，时间还是不变的

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• react-jjjnee (Open reproduction)

[LLmoskk]

@echoyl 可以添加loading 来直接打开drawer 在antd 5.17.0以上 官网有个示例

[echoyl]

@echoyl 可以添加loading 来直接打开drawer 在antd 5.17.0以上 官网有个示例

这个方法没用。现在我就是

setTimeout(() => {
        setLoading(false);
      }, 10);

先打开drawer再说。虽然也是卡住了，比之前点击按钮没有任何反应的卡住要好一点

[Wxh16144]

先打开drawer再说。虽然也是卡住了，比之前点击按钮没有任何反应的卡住要好一点

没用过 pro-components 居然能有这么卡，加一个 flag， 抽屉打开后再挂载你的内容。比如（不完全正确）

const App = () => {
  const [open, setOpen] = useState(false);
  const [shouldMount, setShouldMount] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
    setShouldMount(false);
  };

  const CAN_USE = !!shouldMount

  return (
    <>
      <Button type="primary" onClick={showDrawer}>
        Open
      </Button>
      <Drawer
        title="Basic Drawer"
        loading={CAN_USE === false}
        maskClosable={CAN_USE}
        keyboard={CAN_USE}
        closeIcon={CAN_USE}
        // mask={CAN_USE}
        afterOpenChange={v => {
          console.log('afterOpenChange', v);
          if (v) {
            setShouldMount(true)
          }
        }}

        onClose={onClose}
        open={open}
        width={1500}

      >
        {
          shouldMount
            ? (
              <ProForm
                request={async () => {
                  return { columns: [...value, ...value] };
                }}
                variant="filled"
                grid={true}
              >
                <BetaSchemaForm layoutType="Embed" columns={fieldColumns} />
              </ProForm>
            )
            : null
        }
      </Drawer>
    </>
  );
};

export default App