React Setting Timeout For Loader Browser Issue

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>
                                            )}
)


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.