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>
)
}
}
}
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>
)
}
}
}
