ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.13k stars 8.12k forks source link

🐛 [BUG] PageContainer with loading make HomePage render x2 ( mounted x2 ) #11265

Open yogithesymbian opened 3 weeks ago

yogithesymbian commented 3 weeks ago

🐛 Bug Description

When using the PageContainer component with the loading property:

loading={{
  spinning: loading,
  tip: 'Page loading...',
}}

the content inside the PageContainer renders twice when running (  + R ) / navigation. without loading its run once only.

console log
[mounted] HomePage
[mounted] LayoutPage
[mounted] HomePage

📷 Recurrence Steps

  1. Use the PageContainer component as shown below:
    <PageContainer
     token={{
       paddingInlinePageContainerContent: num,
     }}
     loading={{
       spinning: loading,
       tip: 'Page loading...',
     }}
    >
     {props.children} // renders twice
    </PageContainer>
  2. Observe that the content inside the PageContainer renders twice.

🏞 Expected Results

The content inside the PageContainer should render only once.

💻 Recurrence Code

PageContainer Component Usage

<PageContainer
  token={{
    paddingInlinePageContainerContent: num,
  }}
  loading={{
    spinning: loading,
    tip: 'Page loading...',
  }}
>
  {props.children} // renders twice
</PageContainer>

Home Page Component

"use client";

import { Space } from "antd";
import { useEffect, useRef } from "react";
import YoAlert from "@/components/Feedback/YoAlert";

const HomePage: React.FC = () => {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    if (isMounted) {
      console.log("[mounted] HomePage");
    }
  }, [isMounted]);

  return (
    <>
      <Space direction="vertical" size={"middle"} style={{ display: "flex" }}>
        <YoAlert
          disabledMarquee={true}
          closable={true}
          message={
            <>Welcome yogi arif widodo</>
          }
          type="success"
        />
      </Space>
    </>
  );
};

export default HomePage;

© Version Information

🚑 Other Information

Any relevant screenshots or additional information can be added here.