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, {useEffect, 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";
import Seo from '../src/components/Seo';

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

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

    const [Loading,setLoading] = useState(false);
    useEffect(() => {
      const start = () => {
          NProgress.start()
          setLoading(true)
      }
      const complete = () => {
            NProgress.done()
            setLoading(false)
      }
      Router.events.on('routeChangeStart', start)
      Router.events.on('routeChangeComplete', complete)
      Router.events.on('routeChangeError', complete)
      return () => {
        Router.events.off('routeChangeStart', start)
        Router.events.off('routeChangeComplete', complete)
        Router.events.off('routeChangeError', complete)
      }
    }, [])
  return (
    <Provider store={CoreStore}>
        <Seo metadata={pageProps.seo || (pageProps.statusCode >= 400 ? { noindex: true } : {})} />
        {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>
  )
}