New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
Fixing LayoutSplashScreen inconsistencies
Hello,
This is more a fix suggestion than a question.
I wanted to use a very simple loading screen like this:
return (
<>
<LayoutSplashScreen visible={showSplashScreen} />
{children}
</>
)The issue was that it not worked as expected.
First of all, the app is not wrapped in MetronicSplashScreenContext.
Secondly, I found that in LayoutProvider there is a line that hides the splash screen on Layout render, no matter what:
useEffect(() => {
disableSplashScreen()
}, [])To solve this, as a quick workaround, I passed the visible variable from the context:
<MetronicSplashScreenContext.Provider value={{setCount, visible}}>
{children}
</MetronicSplashScreenContext.Provider>and imported in LayoutProvider to not override this like below:
const [splashScreenShown, setSplashScreenShown] = useState(false)
const {visible} = useContext(MetronicSplashScreenContext)
useEffect(() => {
if (visible && !splashScreenShown) {
setSplashScreenShown(true)
} else if (!visible && splashScreenShown) {
disableSplashScreen()
}
}, [visible, splashScreenShown, disableSplashScreen])This works and LayoutSplashScreen can be now rendered from anywhere within the context.
It would be great if a fix similar to this would be implemented so that the SplashScreen component can be easily used and properly update like so:
<LayoutSplashScreen visible={showSplashScreen} />I use the latest version of react demo2 by the way. Let me know if I missed something.
Thanks!
Tamas
Replies (2)
Also, there is no class "hidden" defined in metronic, this code in MetronicSplashScreen is not working:
useEffect(() => {
const splashScreen = document.getElementById("splash-screen")
// Show SplashScreen
if (splashScreen && visible) {
splashScreen.classList.remove("hidden")
return () => {
splashScreen.classList.add("hidden")
}
}
// Hide SplashScreen
let timeout: number
if (splashScreen && !visible) {
timeout = window.setTimeout(() => {
splashScreen.classList.add("hidden")
}, 3000)
}
return () => {
clearTimeout(timeout)
}
}, [visible])Either the hidden class should be in the scss file:
.hidden {
display: none;
}Or the code should be modified to:
splashScreen.style.setProperty("display", "flex")
...
splashScreen.style.setProperty("display", "none")It is tested and works.
Hi,
Thank you for your feedback, we appreciate that.
I added a task to our task management system and we will implement this in the next Metronic releases.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
