Hi,
I am using react and redux to work on a login page. When a user atempts to login, i dispatch a isLoading
state. When they get a response, the state gets updated and the loader is not supposed to be visible again.
I have set up a timeout for the loader, just so that a user does not wait for so long, it works well on chrome, but on Firefox and Safari , the loader doesnt time out, it remians loading, and since i am using persistant store, the state is retianed unit they log out, and the loader is always showing on the login page.
Any advise/ other methods on how to timeout the loading state so that someone can reattempt to login will be appreciated
My code :
const { isAuthenticated, isLoading, error } = useSelector(state => state.auth);
const [showloader, setshowloader] = useState(false);
useEffect(() => {
if (isLoading) {
setTimeout(() => {
setshowloader(false);
}, 2000);
}
}, [isLoading]);
useEffect(() => {
if (showloader) {
setTimeout(() => {
setshowloader(false);
}, 2000);
}
}, [showloader]);
const handleLogin = e => {
e.preventDefault();
setshowloader(true);
dispatch(login(username, password))
if (error) {
setshowloader(false);
swal.fire({
title: "Error",
text: error,
icon: "error",
dangerMode: true
});
} else if(isAuthenticated === true) {
setshowloader(false);
history.push(`/admin/dashboard`);
}
}
return (
{showloader === true || isLoading === true ? (
<div style={{ textAlign: "center", marginTop: 10 }}>
<Loader
type="Puff"
color="#00BFFF"
height={150}
width={150}
/>
</div>
) :
(
<Button size="lg" color="primary" onClick={handleLogin} >
Login
</Button>
)}
)