Prevent Flashing of Protected Routes Before Redirecting Unauthenticated Users

[Osman-Rasooli]

Description

When unauthenticated users visit the BugBuddy application via the link bugbuddy.vercel.app, there's a brief flashing and glimpse of protected routes (e.g., header, sidebar, main content) before being redirected to the login page. This flashing occurs for a few milliseconds and can be distracting for users.

Steps to Reproduce

1. Open the BugBuddy application in a browser.
2. Ensure that you are not logged in or clear your browser's local storage to simulate being unauthenticated.
3. Visit the link bugbuddy.vercel.app.
4. Observe the brief flashing of protected routes before being redirected to the login page.

Expected Behavior

When unauthenticated users visit the BugBuddy application, they should be immediately redirected to the login page without any flashing or glimpse of protected routes.

Actual Behavior

Unauthenticated users briefly see protected routes (e.g., header, sidebar, main content) for a few milliseconds before being redirected to the login page.

Additional Information

• The BugBuddy application is built using React for the frontend and Appwrite for the backend.
• The authentication logic is set up to check for user sessions in local storage and automatically log in users if a session exists.
• It's important to address this issue to improve the user experience and prevent unauthorized content from being briefly visible before redirection.

Possible Solution

Implement a loading indicator or placeholder component that is displayed until the user's authentication status is verified. This will prevent unauthorized content from being briefly visible before redirection.