How to display Splash screen in reactjs - reactjs

Question

I have two codes for Splash.jsx and one for homepage.jsx. All I want is to display the Splash screen once the Homepage is not in use, but I have no idea how to integrate the splash screen with the Homepage and set the timer, so the splash screen is displayed once I don't use Homepage. It would be great to help me out with showing the splash screen once the Homepage is not in use.
Homepage.jsx
import React from 'react';
import Card from '../Card/Card'
import img2 from '../../Assets/AutoLoan.png'
import img3 from '../../Assets/KYC.png'
import img4 from '../../Assets/VIsa.png'
import './Homepage.css'
import {
Swiper,
SwiperSlide
}
from 'swiper/react';
import 'swiper/css';
import { Navigation } from 'swiper';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { Link } from 'react-router-dom';
const Homepage= () => {
return (
<div>
<div className="background">
<div className="welcome__heading">
<h1>Welcome!!</h1>
</div>
<div className= "customer__support">
<h2>We are here for customer service.</h2>
</div >
<div className="swiper_container">
<Swiper
modules={[Navigation]}
navigation
spaceBetween={10}
slidesPerView={3}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
loop={true}
>
<SwiperSlide>
<Link to="AutoLoan">
<Card imgsrc={img2} alt="AutoLoan" title="Auto Loan" />
</Link>
</SwiperSlide>
<SwiperSlide>
<Link to="KYC">
<Card imgsrc={img3} alt="KYC" title="KYC Form" />
</Link>
</SwiperSlide>
<SwiperSlide>
<Link to="Debit">
<Card imgsrc={img4} alt="Visa" title="Visa Debit Card" />
</Link>
</SwiperSlide>
</Swiper>
</div>
<div ClassName="button">
<Link to = "Location">
<button className = "btn1">
<i className = "fa fa-map"></i>
</button>
</Link>
<Link to = "Calculator">
<button className = "btn2">
<i className = "fa fa-calculator"></i>
</button>
</Link>
</div>
</div>
</div>
);
}
export default Homepage
Splash.jsx
import React from 'react';
import './Splash.css'
import img2 from '../../Assets/Header.png'
import img8 from '../../Assets/hand.svg'
const Splash = () => {
return (
<div>
<div className="bg2">
<div className="header__body">
<div className="header__left">
<div className="header__left__image">
<img src = {img2} alt="Header"/>
</div>
<h1 >Laxmi Bank</h1>
</div>
<div className="header__right">
<h1 >23℃/11:00AM</h1>
</div>
</div>
</div>
<div className="splash">
<h1>TAP HERE</h1>
<div className= "blink">
<img src = {img8} alt = "taphand" />
</div>
</div>
</div>
);
};
export default Splash;
The splash screen should appear after 2 sec of not using Homepage, and once we tap on the splash screen the Homepage should appear again and once it is idle the splash screen should appear and vice versa. and I have no idea how to set the timer and control this component. So, it would be good if someone would help me out.

Answer 1

You need to create a idle timer to trigger after inactivity of the
user in Homepage
When setTimeout triggers the callback it will mount the Splash
Once Splash is mounted, click on the Link tag says TAP HERE back to redirect to home
Homepage -
(path = "/home")
import React,{ useEffect } from "react";
import { useNavigate } from "react-router-dom";
const Homepage= () => {
let navigate = useNavigate();
useEffect(() => {
//Idle timer
let timerId;
const resetTimer = () => {
clearTimeout(timerId);
timerId = setTimeout(() => {
navigate("/splash");
}, 30 * 1000); //30 sec idle time
};
document.addEventListener("keydown", resetTimer);
document.addEventListener("mousemove", resetTimer);
return () => {
clearTimeout(timerId);
document.removeEventListener("keydown", resetTimer);
document.removeEventListener("mousemove", resetTimer);
};
}, []);
}
Splash - (path = "/splash")
const Splash = () => {
return <div>
...
<Link to='/home'>TAP HERE</Link>
</div>
}

Answer 2

You can use react-idle-timer package. A working solution exists here