// components/layout/LoadingToRedirect.js
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
const LoadingToRedirect = ({ path = "/" }) => {
const [count, setCount] = useState(3);
let router = useRouter();
useEffect(() => {
const interval = setInterval(() => {
setCount((currentCount) => --currentCount);
}, 1000);
// redirect once count is equal to 0
count === 0 && router.push(path);
// cleanup
return () => clearInterval(interval);
}, [count]);
return (
<div style={{ display: "flex", justifyContent: "center", height: "100vh" }}>
<p
style={{
position: "absolute",
top: "50%",
}}
>
Redirecting in {count} second
</p>
</div>
);
};
export default LoadingToRedirect;
Now import and use in AdminNav
by replacing Loading spinner icon