蚂蚁设计模态载荷慢

Question

我在项目中使用了ant设计包。我有一个带有模态的组件。我在该组件中有一个按钮，可以用来更改状态。 visibleCon是我的状态，并且在第一次为false时，当我单击按钮（div）时，它将visibleCon的值更改为true，并且应该打开模态。问题是，经过几次，屏幕变得迟钝，并且打开模态的时间很长。有什么问题吗？

import { Row, Col, Card, Avatar, Button } from "antd";
import FormatHelper from "../helper/FormatHelper";
import { UserOutlined } from "@ant-design/icons";
import { useSelector } from "react-redux";
import TimeHelper from "../helper/TimeHelper";
import constants from "../constants/constants.json";
import Message from "../helper/Message";
import Axios from "axios";
import ConfirmModal from "../components/ConfirmModal";
import "./Consultant.css";
import Modal from "antd/lib/modal/Modal";

export default function Consultant(props) {
  const advisor = useSelector((state) => state.student.advisor);
  const [loading, setLoading] = useState(false);
  const [visibleCon, setVisibleCon] = useState(false);

  const cancelConnection = async () => {
    try {
      setLoading(true);
      const token = localStorage.getItem("token");
      const response = await Axios.delete(
        constants.url + "/connection/delete/" + advisor.connectionId,
        {
          headers: {
            authorization: "Bearer " + token,
          },
        }
      );
      const status = response.data.status;
      if (status == 202) {
        setLoading(false);
        // dispatch(resetAdvisor());
        Message.open("نظارت با موفقیت لغو شد");
        setVisibleCon(false);
      } else {
        setLoading(false);
        setVisibleCon(false);
        console.log(response.data);
        Message.open(response.data.result.message);
      }
    } catch (err) {
      console.log(err);
      setVisibleCon(false);
      setLoading(false);
      Message.open("خطایی رخ داده است");
    }
  };

  return (
    <Row justify="center">
      <Col xs={24} sm={24} lg={12}>
        <Card>
          {advisor ? (
            <Row>
              <Col span={12}>
                <Row>
                  <Col span={24}>
                    <p> {advisor.firstName}</p>
                  </Col>
                  <Col span={24}>
                    <p>
                      تلفن همراه: {FormatHelper.toPersianString(advisor.mobile)}{" "}
                    </p>
                  </Col>
                  <Col span={24}>
                    <p> موسسه: {advisor.school} </p>
                  </Col>
                  <Col span={24}>
                    <p> ایمیل: {advisor.mail} </p>
                  </Col>
                  <Col span={24}>
                    <p>
                      تاریخ نظارت:{" "}
                      {FormatHelper.toPersianString(
                        TimeHelper.unixToMoment(advisor.createdTime).format(
                          "jYYYY/jMM/jDD"
                        )
                      )}
                    </p>
                  </Col>
                </Row>
              </Col>
              <Col span={12}>
                <Row>
                  <Col className="ConsultantColumnCenter" span={24}>
                    <Avatar
                      src={constants.url + "/user/avatar/" + advisor.avatar}
                      size={75}
                      icon={<UserOutlined />}
                    />
                  </Col>
                  <Col className="ConsultantColumnCenter" span={24}>
                    <div
                      onClick={() => setVisibleCon(true)}
                      className="ConsultantButton"
                    >
                      <span style={{ fontFamily: "Iran Sans Bold" }}>
                        لغونظارت
                      </span>
                    </div>
                  </Col>
                </Row>
              </Col>
            </Row>
          ) : (
            <p style={{ fontFamily: "Iran Sans Light" }}>شما مشاوری ندارید</p>
          )}
        </Card>
      </Col>
      {/* {visibleCon && (
        <ConfirmModal
          visible={visibleCon}
          loading={loading}
          setVisible={setVisibleCon}
          msg={"آیا برای لغو نظارت اطمینان دارید؟"}
          runFunc={cancelConnection}
        />
      )} */}
      <Modal
        destroyOnClose={true}
        closable={false}
        visible={visibleCon}
        onCancel={() => setVisibleCon(false)}
        footer={null}
        width="30vw"
        centered
      >
        <p>dff</p>
      </Modal>
    </Row>
  );
}