How to display an image for few seconds on load? - reactjs

Question

I'm trying to display an opening screen image that will last 5 seconds once the app loads. I'm using setTimeout but it won't work. Does anyone have an idea?
import OpeningScreen from '../../../../../../assets/images/OPENING_SCREEN.png';
function ProgressComponent() {
const [isOpeningScreenVisible, setOpeningScreenVisible] = useState(true)
setTimeout(() => {
setOpeningScreenVisible(false);
}, 5000);
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
}}
>
{isOpeningScreenVisible && <img src={OpeningScreen} className="image" />}
</div>
);
}
export default ProgressComponent;```

Answer 1

Try changing the img src.
From
{isOpeningScreenVisible && <img src={OpeningScreen} className="image" />}
To this
{isOpeningScreenVisible && <img src={OpeningScreen.src} className="image" />}

Answer 2

I've tested your code and it works fine. try these:
check your image path and be sure it's correct.
check and see if there is any error in the console and fix all of them.
maybe the loading time is taking more time than 5000ms. try 10000ms for showing the image.

Answer 3

You can update your code to use native events so you don't have to re-invent the wheel.
What i would do:
import OpeningScreen from '../../../../../../assets/images/OPENING_SCREEN.png';
function ProgressComponent() {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
}}
>
<img
src={OpeningScreen}
alt="opening screen"
onLoad={e => {
console.log("init event")
setTimeout(() => (e.target as HTMLImageElement).remove(), 5000)
}}
/>
</div>
);
}
export default ProgressComponent;
Anyway, this isn't the best approach. The best you can do is to use css transitions to animate just an opening screen

Answer 4

function App() {
const [loading, setLoading] = useState(false);
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
setLoading(true);
} else if (document.readyState === "complete") {
setTimeout(() => {
setLoading(false);
}, 5000);
}
};
return (
<div style={{ background: "black" }}>
{loading && (
<div id="loadingScreen">
<img src={OpeningScreen} className="image" />
</div>
)}
{!loading && (
<div className="App" id="app"></div>
</div>
Try this It should work as it is still working in one of my project
The Basic Idea is the <img src={openingScreen}/> will be on the screen untill the react build file is loaded to on the site.
Add the everything inside <div className="App" id="app"></div> once they are loaded the image will fade.