I have the following component: In this component, there is an image. When I load the page, I realize the page will be loaded first then the image will be loaded later. How can I suspense the whole page before the image is loaded? I have tried to wrap the whole div (id="container") in a Suspense component with a fallback method but it doesn't seem to work on images, and only on components.
How can I suspense the whole component before the image inside is loaded?
import React from "react";
import resume from "../assets/Joe_Rogan_Resume.jpg";
import Banner from "./Banner";
const Resume = () => (
<div id="container">
<Banner styleclass="ResumePageBanner" h1text="My Resume" />
<div className="resumePage">
<div id="resume">
<img src={resume} alt="Resume" />
</div>
</div>
</div>
);
export default Resume;