Use nprogress in _app

pages/_app.js

@@ -6,8 +6,11 @@ import CssBaseline from '@mui/material/CssBaseline'
 import {Provider, useSession} from 'next-auth/client'
 import {CacheProvider} from '@emotion/react'
 import {grey, green, red} from '@mui/material/colors'
+import NProgress from 'nprogress'
 import createEmotionCache from '../lib/create-emotion-cache'
 
+import '../styles/nprogress.css' // eslint-disable-line import/extensions
+
 import SwitchTheme from '../components/switch-theme'
 
 const getDesignTokens = mode => ({
@@ -48,13 +51,27 @@ export default function MyApp(props) {
   const [mode, setMode] = useState('light')
   const [switchFixed, setSwitchFixed] = useState(false)
   const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode])
+  const router = useRouter()
 
   useEffect(() => {
-    const jssStyles = document.querySelector('#jss-server-side')
-    if (jssStyles) {
-      jssStyles.remove()
+    const handleStart = () => {
+      NProgress.start()
     }
-  }, [])
+
+    const handleStop = () => {
+      NProgress.done()
+    }
+
+    router.events.on('routeChangeStart', handleStart)
+    router.events.on('routeChangeComplete', handleStop)
+    router.events.on('routeChangeError', handleStop)
+
+    return () => {
+      router.events.off('routeChangeStart', handleStart)
+      router.events.off('routeChangeComplete', handleStop)
+      router.events.off('routeChangeError', handleStop)
+    }
+  }, [router])
 
   useEffect(() => {
     if (props.router.pathname.slice(0, 5) === '/teks') {