add load progress bar (nprogress) feature
This commit is contained in:
joseCorte-exe
parent
ab7aa06725
commit
de9ab048c5
7422
package-lock.json
generated
Normal file
7422
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,6 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"faker": "5.5.3",
|
|
||||||
"@emotion/react": "^11.9.0",
|
"@emotion/react": "^11.9.0",
|
||||||
"@emotion/styled": "^11.8.1",
|
"@emotion/styled": "^11.8.1",
|
||||||
"@mui/material": "^5.6.4",
|
"@mui/material": "^5.6.4",
|
||||||
@ -26,7 +25,9 @@
|
|||||||
"chart.js": "^3.7.1",
|
"chart.js": "^3.7.1",
|
||||||
"eslint-plugin-react": "^7.29.4",
|
"eslint-plugin-react": "^7.29.4",
|
||||||
"eslit": "^6.0.0",
|
"eslit": "^6.0.0",
|
||||||
|
"faker": "5.5.3",
|
||||||
"next": "12.1.6",
|
"next": "12.1.6",
|
||||||
|
"nprogress": "^0.2.0",
|
||||||
"react": "18.1.0",
|
"react": "18.1.0",
|
||||||
"react-chartjs-2": "^4.1.0",
|
"react-chartjs-2": "^4.1.0",
|
||||||
"react-dom": "18.1.0",
|
"react-dom": "18.1.0",
|
||||||
@ -34,9 +35,10 @@
|
|||||||
"styled-components": "^5.3.5"
|
"styled-components": "^5.3.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/faker": "5.5.3",
|
|
||||||
"@types/chartjs": "^0.0.31",
|
"@types/chartjs": "^0.0.31",
|
||||||
|
"@types/faker": "5.5.3",
|
||||||
"@types/node": "^17.0.31",
|
"@types/node": "^17.0.31",
|
||||||
|
"@types/nprogress": "^0.2.0",
|
||||||
"@types/react": "^18.0.8",
|
"@types/react": "^18.0.8",
|
||||||
"@types/styled-components": "^5.1.25",
|
"@types/styled-components": "^5.1.25",
|
||||||
"eslint": "8.14.0",
|
"eslint": "8.14.0",
|
||||||
|
|||||||
@ -1,22 +1,48 @@
|
|||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
import '../styles/globals.ts'
|
|
||||||
|
|
||||||
import { AppProps } from 'next/app'
|
import { AppProps } from 'next/app'
|
||||||
|
import NProgress from 'nprogress'
|
||||||
|
|
||||||
|
|
||||||
import Sidebar from '../src/components/sidebar/Sidebar'
|
import Sidebar from '../src/components/sidebar/Sidebar'
|
||||||
import { GlobalStyle } from '../styles/globals'
|
import { GlobalStyle } from '../styles/globals'
|
||||||
import { AppView } from '../styles/app/AppView'
|
import { AppView } from '../styles/app/AppView'
|
||||||
|
import '../styles/nprogress/nprogress.css'
|
||||||
|
import '../styles/globals.ts'
|
||||||
|
|
||||||
import Home from '.'
|
import Home from '.'
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
import Head from 'next/head'
|
||||||
const [ auth, setAuth ] = useState(false)
|
|
||||||
|
|
||||||
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const rota = router.pathname
|
const rota = router.pathname
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleStart = (url) => {
|
||||||
|
console.log(`Loading: ${url}`)
|
||||||
|
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])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppView>
|
<AppView>
|
||||||
|
<Head>
|
||||||
|
<meta name="viewport" content="viewport-fit=cover" />
|
||||||
|
</Head>
|
||||||
<Home auth={rota} />
|
<Home auth={rota} />
|
||||||
<GlobalStyle />
|
<GlobalStyle />
|
||||||
{
|
{
|
||||||
|
|||||||
81
styles/nprogress/nprogress.css
Normal file
81
styles/nprogress/nprogress.css
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
* Make clicks pass-through */
|
||||||
|
#nprogress {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .bar {
|
||||||
|
background: #254F7F;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fancy blur effect */
|
||||||
|
#nprogress .peg {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 0 10px #254F7F, 0 0 5px #254F7F;
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||||
|
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||||
|
transform: rotate(3deg) translate(0px, -4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove these to get rid of the spinner */
|
||||||
|
#nprogress .spinner {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .spinner-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
border: solid 2px transparent;
|
||||||
|
border-top-color: #254F7F;
|
||||||
|
border-left-color: #254F7F;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
-webkit-animation: nprogress-spinner 400ms linear infinite;
|
||||||
|
animation: nprogress-spinner 400ms linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nprogress-custom-parent {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nprogress-custom-parent #nprogress .spinner,
|
||||||
|
.nprogress-custom-parent #nprogress .bar {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes nprogress-spinner {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes nprogress-spinner {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user