Wasp•13mo ago

Customize loading screen background color

Hi everyone,
Is there a straightforward way to customize the background color of loading screen (for protected routes, I guess)? It's currently white and, as I'm using dark/light modes, I would like to align this on the current theme.

The part of code concerned seems to be this one:

const createAuthRequiredPage = (Page) => {
return (props) => {
const { data: user, status, error } = useAuth()

switch (status) {
case 'success':
if (user) {
return <Page {...props} user={user} />
} else {
return <Redirect to="/login" />
}
case 'loading':
return (
<FullPageWrapper className="wasp-auth-required-loader-wrapper">
<Loader />
</FullPageWrapper>
)
case 'error':
return (
<FullPageWrapper className="wasp-auth-required-error-wrapper">
<MessageError subtitle={<small>Details: {error.message}</small>}>
Failed to load user data. Try refreshing the page.
</MessageError>
</FullPageWrapper>
)
}
}
}

kapa.ai•12/9/24, 9:42 AM

Hi @Jorge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•12/9/24, 9:42 AM

----------------------
Yes, there is a way to customize the background color of the loading screen for protected routes in Wasp. Based on the knowledge sources provided, I can offer some guidance on how to approach this.

The loading screen you're referring to is part of Wasp's Auth UI, which can be customized. While there isn't a direct method to change just the loading screen's background color, you can customize the overall appearance of the Auth UI, which should affect the loading screen as well.

Here's how you can customize the colors:

Create an appearance object with your desired colors:

Pass this appearance object to your Auth UI components:

This approach should allow you to set a custom background color that aligns with your dark/light modes Auth UI Customization (https://wasp-lang.dev/docs/auth/ui#customization-).

However, it's important to note that this customization is primarily designed for the auth forms themselves, and it's not clear from the provided knowledge sources if it will directly affect the loading screen you're referring to.

If this method doesn't work for your specific case, you might need to consider a more direct approach to styling the loading screen. Unfortunately, the knowledge sources don't provide specific information on how to do this for the auth-required loading screen.

kapa.ai•12/9/24, 9:42 AM

For a more tailored solution, you might need to look into overriding the styles of the and components used in the function. However, the exact method to do this isn't specified in the provided knowledge sources.

If you need more specific guidance, I recommend reaching out to the Wasp community or developers for more detailed instructions on customizing this particular loading screen.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/9/24, 9:42 AM

Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

JorgeOP•12/9/24, 9:47 AM

@kapa.ai it seems to be the generated code by wasp framework

kapa.ai•12/9/24, 9:47 AM

Let me check the knowledge base for you again. One moment!

kapa.ai•12/9/24, 9:48 AM

----------------------
You're correct. The code you initially shared is indeed generated by the Wasp framework. This is part of Wasp's authentication system, specifically for handling protected routes.

The function is a higher-order component generated by Wasp to wrap pages that require authentication. It handles different states of authentication (loading, success, error) and renders appropriate content based on these states.

As this is generated code, directly modifying it is not recommended, as your changes might be overwritten when Wasp regenerates the code. However, there are a couple of potential approaches to customize this:

Wasp allows for some customization of the Auth UI, as mentioned in my previous response. However, this might not directly affect the loading screen for protected routes.
There's an open issue in the Wasp GitHub repository addressing this exact concern. The issue titled "Get rid of an ugly loading message that appears when auth is being processed" GitHub Issue #1076 (https://github.com/wasp-lang/wasp/issues/1076) discusses replacing the current loading message with something nicer, like a spinner.

One of the comments on this issue suggests that the "offending" piece of code is exactly what you've shared. The Wasp team is aware of this and is considering allowing customization of this loading screen in future versions.

For now, there isn't a straightforward, officially supported way to customize just the background color of this specific loading screen. The Wasp team is working on improving this aspect of the framework, but until then, you might need to work within the current limitations or explore more advanced (but potentially fragile) workarounds.

kapa.ai•12/9/24, 9:48 AM

If this is a critical issue for your project, I recommend following the GitHub issue for updates or reaching out to the Wasp team directly for more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/9/24, 9:48 AM

Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

miho•12/9/24, 1:49 PM

We wrapped those components with e.g. class so you can target it with your custom CSS:

JorgeOP•12/9/24, 6:04 PM

hey thanks ! It works thanks, but I still having a very little delay before where the background is white