Pre-rendered static pages are great for performance, however, they can reduce the quality of our user's experience. Content may feel less relevant and engaging if it doesn't change based on the information our user has already the app.
We will use the state of our user to dynamically change the call to action button for each plan. If we don't have a user, we want them to create an account; if we have a user but they are not subscribed, we want them to subscribe; and if we have a user that is subscribed, we want to give them the option to manage their subscription.
Additionally, we implement a loading state for our useUser
hook, which can be used to determine whether we are waiting for our auth.users
data to be enriched with the columns from our profile
table.
By using the isLoading
state, our pricing page can delay the rendering of the call to action button until we have the necessary state to display the correct one.
If you put setIsLoading(false)
in getUserProfile
function, then isLoading
will always be set to false until getUserProfile
is called.
getUserProfile
is called only if there is a session.
In some cases, it never gets called.
Instead of writing setIsLoading(false)
in the getUserProfile
function, I would set it outside when it's first get called:
getUserProfile().then(() => {
setIsLoading(false);
});
This way we make sure it's always set to false right after getUserProfile
gets called.
Hope that makes sense 😊 Happy coding!