I have a React application where I display a “Verify your email” banner if the user is not verified. The user’s verification status is stored in local storage and is loaded into the application state on component mount. However, when the user is already verified, the banner still flashes for a millisecond before disappearing.

Current Setup:

User data, including isVerified, is loaded from local storage into the application state when the component mounts.
The banner is conditionally rendered based on the isVerified status.
Problem
When the component mounts, the isVerified status briefly shows as false or undefined, causing the banner to flash momentarily even for verified users.
Possible Solutions:

Using a Loading State:

Introduce a loading state to manage the asynchronous loading process.
Conditionally render user-related UI elements based on the loading state.
Ensure that the banner is only shown when isVerified is definitively false and the loading state is false.
Setting isVerified to undefined:

Initialize isVerified as undefined.
Check its value to determine if the data has been loaded.
Conditionally render the banner based on the defined status of isVerified.

Skeleton Loading State.
Use skeleton screens to indicate data loading.

Suspense and React.lazy.
Use React Suspense and lazy loading for components dependent on user data.
Question:

What is the best practice to prevent the flashing of the “Verify your email” banner when loading user data from local storage in a React application? How should I implement the chosen solution effectively?