Problem with Unauthenticated Users Briefly Accessing Pages Intended Only for Logged-in Users - reactjs

Question

I am creating a React project.
There are users who use the website, and there is a page that can only be accessed by logged-in users.
I am using a Higher Order Component (HOC) to check the user's authentication status.
If an unauthenticated user attempts to visit a page that only a logged-in user can access, I am using useNavigate from react-router-dom to redirect the user to the login page.
The problem is that an unauthenticated user can briefly (for about 0.5 seconds) see the content of the page that they cannot access.
It seems that the page's content is briefly exposed while the user authentication process is running after rendering.
How can I prevent this from happening?
client > src > hoc > Auth.js
export default function Auth(SpecificComponent, option, adminRoute = null) {
// Auth option:
// 1. null: anyone can access
// 2. true: only authenticated users can access
// 3. false: only unauthenticated users can access
function AuthenticationCheck() {
const dispatch = useDispatch();
const navigate = useNavigate();
useEffect(() => {
dispatch(userActions.auth()).then((res) => {
if (res && !res.isAuth) {
// If the user is not authenticated and the page requires authentication,
if (option) {
// redirect to login page
navigate("/login", { replace: true });
}
} else {
if (adminRoute && !res.isAdmin) {
// If the page is an admin route and the user is not an admin,
navigate("/", { replace: true });
alert("This page is only accessible by admin users.");
}
if (option === false) {
// If the page is intended only for unauthenticated users and the user is authenticated,
navigate(-1, { replace: true });
}
}
});
}, []);
return <SpecificComponent />;
}
return AuthenticationCheck;
}
client > src > App.js
function App() {
const AuthLogin = Auth(LoginPage, false);
const AuthRegister = Auth(RegisterPage, false);
const AuthHome = Auth(HomePage, null);
const AuthAboutPage = Auth(AboutPage, null);
const AuthCakes = Auth(CakesPage, null);
const AuthOrder = Auth(OrderPage, null);
const AuthOrderDetail = Auth(OrderDetailPage, null);
const AuthMypage = Auth(MyPage, true);
const AuthCart = Auth(CartPage, true);
const AuthPayment = Auth(PaymentPage, true);
const AuthPaymentSuccessPage = Auth(PaymentSuccessPage, true);
const AuthPaymentFailurePage = Auth(PaymentFailurePage, true);
const AuthGuideRice = Auth(GuideRicePage, null);
const AuthGuideBread = Auth(GuideBreadPage, null);
const AuthFAQ = Auth(FAQPage, null);
const AuthContact = Auth(ContactPage, null);
const AuthUploadProduct = Auth(UploadProductPage, true, true);
const AuthTerms = Auth(TermsPage, null);
const AuthPrivacyPolicy = Auth(PrivacyPolicyPage, null);
return (
<>
<Navbar />
<Sidebar />
<Routes>
<Route path="/" element={<AuthHome />} />
<Route path="/login" element={<AuthLogin />} />
<Route path="/register" element={<AuthRegister />} />
<Route path="/about" element={<AuthAboutPage />} />
<Route path="/cakes/:ingredient" element={<AuthCakes />} />
<Route path="/order" element={<AuthOrder />} />
<Route path="/order/detail/:productId" element={<AuthOrderDetail />} />
<Route path="/user/mypage" element={<AuthMypage />}>
<Route path="order-history" element={<OrderHistoryPage />} />
<Route
path="order-cancellation-history"
element={<OrderCancellationHistoryPage />}
/>
<Route path="coupon" element={<CouponPage />} />
<Route path="mileage" element={<MileagePage />} />
<Route path="edit-profile" element={<EditProfilePage />} />
<Route path="unregister" element={<UnregisterPage />} />
</Route>
<Route path="/user/cart" element={<AuthCart />} />
<Route path="/payment" element={<AuthPayment />} />
<Route path="/payment/success" element={<AuthPaymentSuccessPage />} />
<Route path="/payment/failure" element={<AuthPaymentFailurePage />} />
<Route path="/guide/rice" element={<AuthGuideRice />} />
<Route path="/guide/bread" element={<AuthGuideBread />} />
<Route path="/faq" element={<AuthFAQ />} />
<Route path="/contact" element={<AuthContact />} />
<Route path="/upload" element={<AuthUploadProduct />} />
<Route path="/policy/privacy-policy" element={<AuthPrivacyPolicy />} />
<Route path="/policy/terms" element={<AuthTerms />} />
</Routes>
<Footer />
</>
);
}
export default App;
I would like to perform the AuthenticationCheck of my HOC before the page is rendered.
As I am new to implementing this feature, I may have written incorrect or inefficient code by referring to outdated videos and articles.
I would like advice on how to approach or solve this problem in order to perform the AuthenticationCheck before the page is rendered as I intended. Could you please help me with this issue on how to achieve what I want?