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 (3)
Many word games online allow players to practice as often as they want. Repeated practice can help players become familiar with common puzzle types. It also gives them more opportunities to improve their speed and accuracy.
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
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
