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>
 );
}

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;
}