React LayoutSplashScreen
<pre lang="html"></pre> Hi,
I am using Metronic React demo 8.
Every time I try to use the LayoutSplashScreen it disappears automatically after a certain time.
As example:
I have a provider which is loading data. I am rendering the LayoutSplashScreen while the data is loading and otherwise the children are rendered.
The loader disappears after a few seconds but the data is not loaded and therefore not displayed (I am using a fake request to test various times of loading).
This is the provider:
const TenantProvider: FC<WithChildren> = ({children}) => {
const [tenant, setTenant] = useState<TenantModel | undefined>(undefined)
const [showSplashScreen, setShowSplashScreen] = useState(true)
useEffect(() => {
const requestTenant = async (subdomain: string) => {
try {
setTimeout(() => {
setShowSplashScreen(false)
}, 5000)
} catch (error) {
console.error(error)
} finally {
// setShowSplashScreen(false)
}
}
requestTenant("test")
// eslint-disable-next-line
}, [])
return (
<TenantContext.Provider value={{tenant, setTenant}}>
{showSplashScreen ? <LayoutSplashScreen /> : tenant ? children : <h1>Not found</h1>}
</TenantContext.Provider>
)
}How I included the provider (
index.tsx):createRoot(container).render(
<QueryClientProvider client={queryClient}>
<MetronicI18nProvider>
<TenantProvider>
<AuthProvider>
<AppRoutes />
</AuthProvider>
</TenantProvider>
</MetronicI18nProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)After like one second a white screen appears and after the 5 seconds (setTimeout) the h1 appears.
Is there a guide or can someone help me out on how to use the
LayoutSplashScreen?Best regards,
Sebastian
Replies (2)
The "pre" tags are messing up the code in the post.
Here is an correctly formatted code: https://pastebin.com/9yDCF8ri
Hi Sebastian,
Thank you for reaching out to us.
The MetronicSplashScreenProvider isn't used in our theme and it will be deleted in the next releases, you can enable and disable loading by adding a "page-loading" class on the body.
//enables loading
document.body.classList.add("page-loading")
//disables loading
document.body.classList.remove("page-loading");In public/index.html loading class is added to show the loading screen on page first load, this class gets removed because we reset body classes in file src/_metronic/layout/core/_LayoutSetup.ts inside
initLayoutSettings function.Regards,
Lauris Stepanovs,
Keenthemes Support Team
