Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

add load progress bar (nprogress) feature

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-09 18:13:10 -03:00
parent ab7aa06725
commit de9ab048c5
5 changed files with 7935 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7422
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -17,7 +17,6 @@
]
},
"dependencies": {
"faker": "5.5.3",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.6.4",
@ -26,7 +25,9 @@
"chart.js": "^3.7.1",
"eslint-plugin-react": "^7.29.4",
"eslit": "^6.0.0",
"faker": "5.5.3",
"next": "12.1.6",
"nprogress": "^0.2.0",
"react": "18.1.0",
"react-chartjs-2": "^4.1.0",
"react-dom": "18.1.0",
@ -34,9 +35,10 @@
"styled-components": "^5.3.5"
},
"devDependencies": {
"@types/faker": "5.5.3",
"@types/chartjs": "^0.0.31",
"@types/faker": "5.5.3",
"@types/node": "^17.0.31",
"@types/nprogress": "^0.2.0",
"@types/react": "^18.0.8",
"@types/styled-components": "^5.1.25",
"eslint": "8.14.0",

36
pages/_app.tsx
View File

@ -1,22 +1,48 @@
import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import '../styles/globals.ts'
import { AppProps } from 'next/app'
import NProgress from 'nprogress'
import Sidebar from '../src/components/sidebar/Sidebar'
import { GlobalStyle } from '../styles/globals'
import { AppView } from '../styles/app/AppView'
import '../styles/nprogress/nprogress.css'
import '../styles/globals.ts'
import Home from '.'
function MyApp({ Component, pageProps }: AppProps) {
const [ auth, setAuth ] = useState(false)
import Head from 'next/head'
function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter()
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 (
<AppView>
<Head>
<meta name="viewport" content="viewport-fit=cover" />
</Head>
<Home auth={rota} />
<GlobalStyle />
{

81
styles/nprogress/nprogress.css Normal file
View 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);
}
}

786
yarn.lock
View File

File diff suppressed because it is too large Load Diff