如何等待动态导入组件的资产完全加载

Question

我有nextjs应用程序，我尝试逐个渲染多个组件，每个组件都完全加载后，包括资产（图像，文本）；

现在我在图像上有一个onLoad事件，以在图像完全加载后呈现下一个组件。

import Header from '../../elements/Header';

const Home = () => {
  const [renderAbout, setRenderAbout] = useState(false);

  const importAbout = async () => {
    const { default: Hello } = await import('./HomeAbout');
    setRenderAbout(<Hello />);
  };
  useEffect(() => {
    importAbout();
  }, []);

  console.log('rendering after all assets is loaded');

  return (
    <div className="homePageBox">
      <Header headerClass="headerBox_main" />
      {renderAbout}
    </div>
  );
};

export default Home;

const About = () => {
  const [renderContacts, setRenderContacts] = useState(false);
  const handleLoad = async () => {
    const { default: Contacts} = await import('./Contacts');
    setRenderAdv(<Contacts/>);
  };

 console.log('rendering immediately after home is rendered);

  return (
    <React.Fragment>
      <div className="homeAboutBox">
        <div className="homeAboutImgBox">
          <img src="/static/images/someImage.png" onLoad={handleLoad} />
        </div>
      </div>
      {renderContacts}
    </React.Fragment>
  );
};

export default About;

我看到，Home组件不是在所有资产加载之前呈现的，而是About组件在其所有资产加载之前呈现的，这就是为什么Contacts组件也在没有事件onLoad之类的条件下呈现的原因。而且我只想在完全加载About组件的资产后加载Contacts组件。