提交数据加载时dom被替换来不及拿到Form数据 (有demo，求解答)，如何合理使用loading效果？

Question

我有几个form表单是分离开的
我通过form.useForm将它们收集在一起
让后我需要一个加载效果
加载就会渲染页面，dom会被替换, 因为dom被替换来不及拿到数据
求大佬建议一个最佳实践， 万分感谢！！

import { useState } from 'react';
import { Button, Form, Input } from 'antd';

const Demo: React.FC = () => {
  const [form] = Form.useForm();
  const [form2] = Form.useForm();
  const [form3] = Form.useForm();
  const [loading, setLoading] = useState(false);
  if (loading) {
    return <>loading</>;
  }
  return (
    <>
      <Form form={form} initialValues={{ username: 'username', password: 'password' }}>
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input defaultValue={'username1'} />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password defaultValue={'password1'} />
        </Form.Item>
      </Form>
      <Form form={form2} initialValues={{ username2: 'username', password2: 'password' }}>
        <Form.Item
          label="Username2"
          name="username2"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input defaultValue={'username2'} />
        </Form.Item>

        <Form.Item
          label="Password2"
          name="password2"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password defaultValue={'password2'} />
        </Form.Item>
      </Form>
      <Form form={form3} initialValues={{ username3: 'username', password3: 'password' }}>
        <Form.Item
          label="Username3"
          name="username3"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input defaultValue={'username3'} />
        </Form.Item>

        <Form.Item
          label="Password3"
          name="password3"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password defaultValue={'password3'} />
        </Form.Item>
      </Form>

      <Button
        type="primary"
        htmlType="submit"
        onClick={async () => {
          setLoading(true);
          await new Promise((resolve) =>
            setTimeout(() => {
              resolve(true);
            }, 1000),
          );
          const formVal1 = await form.validateFields().catch(() => {});
          const formVal2 = await form2.validateFields().catch(() => {});
          const formVal3 = await form3.validateFields().catch(() => {});
          setLoading(false);
          console.log({ formVal1, formVal2, formVal3 });
        }}
      >
        Submit
      </Button>
    </>
  );
};
export default Demo;

Stackblitz 在线demo

Answer 1

其实我这个做法是错的。一般都是初始加载页面时要用到骨架屏，后面提交加载只需要用一个蒙层提交中就好了。