mip-website/pages/_app.js

import 'mdb-react-ui-kit/dist/css/mdb.min.css'
import '../styles/global.css'
import '../public/style/font/font.css'
import '../styles/normalize.css'
import 'swiper/swiper-bundle.css'
import "../styles/simple-grid.css"
import 'nprogress/nprogress.css';
import "react-lightbox-pack/dist/index.css";
import Router from "next/router";
import React, {useState} from "react";
import Loader from "./components/Loader";
import NProgress from 'nprogress';
import {ChakraProvider} from "@chakra-ui/react";
import { extendTheme } from '@chakra-ui/react'
import { StepsStyleConfig as Steps } from 'chakra-ui-steps';
import {Provider} from "react-redux";
import {CoreStore} from "../src/redux/store/store";

const theme = extendTheme({
    components: {
        Steps,
    },
});

export default function App({ Component, pageProps   }) {

    const [Loading,setLoading] = useState(false);
      Router.events.on('routeChangeStart',(url) => {
          NProgress.start()
          setLoading(true)
      })
        Router.events.on('routeChangeComplete',(url) => {
            NProgress.done()
            setLoading(false)
        })
  return (
    <Provider store={CoreStore}>
        {Loading && <Loader />}
        <ChakraProvider resetCSS={false} theme={theme}>
            <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
            <Component {...pageProps  } />
        </ChakraProvider>
    </Provider>
  )
}