hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add loading between pages

Browse Source
This commit is contained in:
Hazem Krimi
2021-08-16 15:42:21 +01:00
parent 9a39e89f48
commit 07c97a29b5
4 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/GlobalStyles.tsx
+11
View File
@@ -48,6 +48,17 @@ const Global = createGlobalStyle<Props>`
color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
transition: color 250ms ease-in-out, background 250ms ease-in-out;
scroll-behavior: smooth;
#nprogress .bar {
background: ${({ dark, theme }) =>
dark ? theme.colors.dark.text : theme.colors.light.text} !important;
}
#nprogress .peg {
box-shadow: 0 0 10px ${({ dark, theme }) =>
dark ? theme.colors.dark.text : theme.colors.light.text}, 0 0 5px ${({ dark, theme }) =>
dark ? theme.colors.dark.text : theme.colors.light.text} !important;
}
}
body::-webkit-scrollbar {
package.json
+2
View File
@@ -16,6 +16,7 @@
"mdx-embed": "^0.0.17",
"next": "10.0.4",
"next-mdx-remote": "^2.1.1",
"nprogress": "^0.2.0",
"prism-react-renderer": "^1.1.1",
"react": "17.0.1",
"react-dom": "17.0.1",
@@ -24,6 +25,7 @@
},
"devDependencies": {
"@types/node": "^14.14.19",
"@types/nprogress": "^0.2.0",
"@types/react": "^17.0.0",
"@types/react-typing-animation": "^1.6.2",
"@types/styled-components": "^5.1.7",
pages/_app.tsx
+25
View File
@@ -1,5 +1,9 @@
import { useEffect } from 'react';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import { useRouter } from 'next/router';
import Nav from '../components/Nav';
import DarkMode from '../components/DarkMode';
import Container from '../components/Container';
@@ -7,7 +11,28 @@ import GlobalStyles from '../components/GlobalStyles';
import Theme from '../components/Theme';
import Footer from '../components/Footer';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
NProgress.configure({ showSpinner: false });
const App = ({ Component, pageProps }: AppProps) => {
const router = useRouter();
useEffect(() => {
router.events.on('routeChangeStart', () => {
NProgress.start();
});
router.events.on('routeChangeComplete', () => {
NProgress.done();
});
router.events.on('routeChangeError', () => {
NProgress.done();
});
}, []);
return (
<>
<Head>
yarn.lock
+5
View File
@@ -1161,6 +1161,11 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.19.tgz#5135176a8330b88ece4e9ab1fdcfc0a545b4bab4"
integrity sha512-4nhBPStMK04rruRVtVc6cDqhu7S9GZai0fpXgPXrFpcPX6Xul8xnrjSdGB4KPBVYG/R5+fXWdCM8qBoiULWGPQ==
"@types/nprogress@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
"@types/parse5@^5.0.0":
version "5.0.3"
resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"