get-convex
React: Optionally treat loading as unauthenticated
Hey all, I used convex for some weeks now and came across the <Unauthenticated /> react component.
I noticed when using SSR in NextJS there is a short time window where the page renders nothing when using said component together with <Authenticated />. I looked into the code and found out, that when the authentication state is loading, neither of said components render anything.
To have more control over this and to fix this small issue I want to introduce a prop on the <Unauthenticated /> component.
How does it work?
With the prop loadingEqualsUnauthenticated developers can decide wether they want to treat the loading state as unauthenticated or not. So when this gets set to true, the loading state is ignored and the children are rendered to the DOM.
This option defaults to false, so this should not be a breaking change. This is something similar to what Clerk provides through their built-in components: loadingEqualsUnauthenticated
Please let me know what you think of this change. Any feedback is welcome.
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.
Seems like a reasonable desire, but we also want to balance with the desire for simplicity - additional flags -> additional complexity. We'll have to noodle on this to decide if it's worth.
Note that you can accomplish this today with a hook, or by rendering the same thing in <Unauthenticated> or <Loading>! How about instead of a flag, just a new component called <UnauthenticatedOrLoading>?
I used the hook for checking the loading state before, but for me it felt weird having components that render on a given auth state but both cannot handle loading states. I think having a dedicated component for this is a good idea instead of having a flag