feat: add a new progress bar layout

This commit is contained in:
Ravinou 2025-04-21 10:54:10 +02:00
commit 799bf03cd5
No known key found for this signature in database
GPG key ID: EEEE670C40F6A4D7
5 changed files with 166 additions and 24 deletions

View file

@ -0,0 +1,25 @@
import { createContext, useContext } from 'react';
import NProgress from 'nprogress';
type LoaderContextType = {
start: () => void;
stop: () => void;
};
const LoaderContext = createContext<LoaderContextType>({
start: () => {},
stop: () => {},
});
export const LoaderProvider = ({ children }: { children: React.ReactNode }) => {
const start = () => NProgress.start();
const stop = () => NProgress.done();
return (
<LoaderContext.Provider value={{ start, stop }}>
{children}
</LoaderContext.Provider>
);
};
export const useLoader = () => useContext(LoaderContext);

120
package-lock.json generated
View file

@ -17,6 +17,7 @@
"next": "^15.2.5",
"next-auth": "^4.24.10",
"nodemailer": "^6.10.0",
"nprogress": "^0.2.0",
"react": "^18.3.1",
"react-chartjs-2": "^5.3.0",
"react-dom": "^18.3.1",
@ -33,6 +34,7 @@
"@types/bcryptjs": "^2.4.6",
"@types/node": "^22.10.2",
"@types/nodemailer": "^6.4.17",
"@types/nprogress": "^0.2.3",
"@types/react": "^18.3.18",
"@types/supertest": "^6.0.2",
"eslint-config-next": "^15.3.1",
@ -1218,6 +1220,13 @@
"@types/node": "*"
}
},
"node_modules/@types/nprogress": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz",
"integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/parse-json": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@ -3753,21 +3762,6 @@
"node": ">= 0.6"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@ -5290,6 +5284,12 @@
"node": ">=6.0.0"
}
},
"node_modules/nprogress": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
"license": "MIT"
},
"node_modules/oauth": {
"version": "0.9.15",
"resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
@ -7632,6 +7632,96 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@next/swc-darwin-arm64": {
"version": "15.3.0",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.3.0.tgz",
"integrity": "sha512-PDQcByT0ZfF2q7QR9d+PNj3wlNN4K6Q8JoHMwFyk252gWo4gKt7BF8Y2+KBgDjTFBETXZ/TkBEUY7NIIY7A/Kw==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "15.3.0",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.3.0.tgz",
"integrity": "sha512-m+eO21yg80En8HJ5c49AOQpFDq+nP51nu88ZOMCorvw3g//8g1JSUsEiPSiFpJo1KCTQ+jm9H0hwXK49H/RmXg==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "15.3.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.3.0.tgz",
"integrity": "sha512-H0Kk04ZNzb6Aq/G6e0un4B3HekPnyy6D+eUBYPJv9Abx8KDYgNMWzKt4Qhj57HXV3sTTjsfc1Trc1SxuhQB+Tg==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "15.3.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.3.0.tgz",
"integrity": "sha512-k8GVkdMrh/+J9uIv/GpnHakzgDQhrprJ/FbGQvwWmstaeFG06nnAoZCJV+wO/bb603iKV1BXt4gHG+s2buJqZA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "15.3.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.3.0.tgz",
"integrity": "sha512-a7kUbqa/k09xPjfCl0RSVAvEjAkYBYxUzSVAzk2ptXiNEL+4bDBo9wNC43G/osLA/EOGzG4CuNRFnQyIHfkRgQ==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "15.3.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.3.0.tgz",
"integrity": "sha512-vHUQS4YVGJPmpjn7r5lEZuMhK5UQBNBRSB+iGDvJjaNk649pTIcRluDWNb9siunyLLiu/LDPHfvxBtNamyuLTw==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
}
}
}

View file

@ -22,6 +22,7 @@
"next": "^15.2.5",
"next-auth": "^4.24.10",
"nodemailer": "^6.10.0",
"nprogress": "^0.2.0",
"react": "^18.3.1",
"react-chartjs-2": "^5.3.0",
"react-dom": "^18.3.1",
@ -38,6 +39,7 @@
"@types/bcryptjs": "^2.4.6",
"@types/node": "^22.10.2",
"@types/nodemailer": "^6.4.17",
"@types/nprogress": "^0.2.3",
"@types/react": "^18.3.18",
"@types/supertest": "^6.0.2",
"eslint-config-next": "^15.3.1",

View file

@ -4,22 +4,33 @@ import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { SessionProvider } from 'next-auth/react';
import { AppProps } from 'next/app';
import Router from 'next/router';
import NProgress from 'nprogress';
//Components
import Layout from '../Components/UI/Layout/Layout';
import { LoaderProvider } from '~/contexts/LoaderContext';
NProgress.configure({ showSpinner: false });
Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<SessionProvider session={pageProps.session}>
<Layout>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1'></meta>
<link rel='shortcut icon' href='/favicon.ico' />
<title>BorgWarehouse</title>
</Head>
<ToastContainer stacked />
<Component {...pageProps} />
</Layout>
<LoaderProvider>
<Layout>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1'></meta>
<link rel='shortcut icon' href='/favicon.ico' />
<title>BorgWarehouse</title>
</Head>
<ToastContainer stacked />
<Component {...pageProps} />
</Layout>
</LoaderProvider>
</SessionProvider>
);
}

View file

@ -20,6 +20,20 @@ body {
display: none;
}
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #6d4aff;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}