Issues with Skeleton Loading Not Displaying for Session-Based Components
I'm encountering an issue with rendering a skeleton loading state in my React components that depend on the user's session. I've created custom
SignedIn and SignedOut components to conditionally display content based on whether the user is authenticated. The problem arises when I refresh the website—the skeleton loader for the UserAvatar component doesn't show as expected during the pending state; instead, the component seems to render as null and immediately displays the UserMenu.
Here's a brief overview of my implementation:
- SignedIn Component: Displays its children only when there is an active session.
- SignedOut Component: Renders its children only when there's no active session and the session is not pending.
- Navigation Bar: Uses these components to conditionally render the UserMenu (for signed-in users) or a "Sign In" button (for signed-out users).
- UserMenu & UserAvatar Components: The UserAvatar component should display a skeleton loader when the session data is pending. However, the skeleton never appears.
Notably, I've observed that Clerk Auth’s implementation of similar components successfully displays a skeleton loader for the user button during the loading state.
I'm looking for insights on why the skeleton loading state might not be working in my implementation and suggestions on how to resolve this issue.
4 Replies
Pass a fallback component next to children props and make sure to render the fallback when the session is pending
thank you for the help ☺️ can you give an example code?
You just pass the loading skeleton component as props for the signIn component rendering the children in it and use it on the the component itself, if it is pending return the fallback component itself .will send a code later but use this intuition
thank you sir 😊
This is a very great idea; however, I would like to emulate Clerk Auth's approach where their signed-in and signed-out components don't use fallback props. Their skeleton loading is actually implemented directly in the user button component. What would be a good approach here to mimic Clerk's method?