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.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes/
Regards,
Lauris Stepanovs,
Keenthemes Support Team