LayoutSplashScreen doesn't work, metronic 7 react

i need proper example of splash screen logic

<pre> export default function App({ store, persistor, basename }) { return ( /* Provide Redux store */ <Provider store={store}> {/* Asynchronously persist redux stores and show `SplashScreen` while it's loading. */} <PersistGate persistor={persistor} loading={<LayoutSplashScreen />}> {/* Add high level `Suspense` in case if was not handled inside the React tree. */} <React.Suspense fallback={<LayoutSplashScreen />}> {/* Override `basename` (e.g: `homepage` in `package.json`) */} <BrowserRouter basename={basename}> {/*This library only returns the location that has been active before the recent location change in the current window lifetime.*/} <MaterialThemeProvider> {/* Provide `react-intl` context synchronized with Redux state. */} <I18nProvider> {/* Render routes with provided `Layout`. */} <Routes /> </I18nProvider> </MaterialThemeProvider> </BrowserRouter> </React.Suspense> </PersistGate> </Provider> ); } </pre> <pre> import React, {createContext, useContext, useState, useEffect} from "react"; const MetronicSplashScreenContext = createContext(); export function MetronicSplashScreenProvider({ children }) { const [count, setCount] = useState(0); let visible = count > 0; 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; if (splashScreen && !visible) { timeout = setTimeout(() => { splashScreen.classList.add("hidden"); }, 3000); } return () => { clearTimeout(timeout); }; }, [visible]); return ( <MetronicSplashScreenContext.Provider value={setCount}> {children} </MetronicSplashScreenContext.Provider> ); } export function LayoutSplashScreen({ visible = true }) { // Everything are ready - remove splashscreen const setCount = useContext(MetronicSplashScreenContext); useEffect(() => { if (!visible) { return; } setCount(prev => { return prev + 1; }); return () => { setCount(prev => { return prev - 1; }); }; }, [setCount, visible]); return null; } </pre>