xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add router loading

Browse Source
This commit is contained in:
Defectink
2022-05-11 09:56:20 +08:00
parent 3ad0a3d97a
commit 43df816bba
2 changed files with 71 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/RUA/loading/VercelLoading.tsx
View File

@ -4,38 +4,40 @@ import styles from './VercelLoading.module.css';
const VercelLoading = () => {
return (
<>
<div
id="container"
className={classNames(
styles.container,
styles.visible,
styles.building
)}
>
<div id="icon-wrapper" className={styles['icon-wrapper']}>
<svg viewBox="0 0 226 200">
<defs>
<linearGradient
x1="114.720775%"
y1="181.283245%"
x2="39.5399306%"
y2="100%"
id="linear-gradient"
<div className="fixed bottom-[10px] right-[20px] z-[99999]">
<div
id="container"
className={classNames(
styles.container,
styles.visible,
styles.building
)}
>
<div id="icon-wrapper" className={styles['icon-wrapper']}>
<svg viewBox="0 0 226 200">
<defs>
<linearGradient
x1="114.720775%"
y1="181.283245%"
x2="39.5399306%"
y2="100%"
id="linear-gradient"
>
<stop stopColor="#000000" offset="0%"></stop>
<stop stopColor="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g
id="icon-group"
fill="none"
stroke="url(#linear-gradient)"
strokeWidth="18"
className={styles['icon-group']}
>
<stop stopColor="#000000" offset="0%"></stop>
<stop stopColor="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g
id="icon-group"
fill="none"
stroke="url(#linear-gradient)"
strokeWidth="18"
className={styles['icon-group']}
>
<path d="M113,5.08219117 L4.28393801,197.5 L221.716062,197.5 L113,5.08219117 Z"></path>
</g>
</svg>
<path d="M113,5.08219117 L4.28393801,197.5 L221.716062,197.5 L113,5.08219117 Z"></path>
</g>
</svg>
</div>
</div>
</div>
</>

38
pages/_app.tsx
View File

@ -7,6 +7,13 @@ import 'styles/prism-one-dark.css';
import 'styles/rua.css';
import { MDXProvider } from '@mdx-js/react';
import Anchor from 'components/mdx/Anchor';
import { useRouter } from 'next/router';
import { useCallback, useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
const VercelLoading = dynamic(
() => import('components/RUA/loading/VercelLoading')
);
const components = {
a: Anchor,
@ -15,6 +22,35 @@ const components = {
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page) => page);
const router = useRouter();
const [loading, setLoading] = useState(false);
const handleStart = useCallback(
(url: string) => {
url !== router.pathname ? setLoading(true) : setLoading(false);
},
[router.pathname]
);
const handleComplete = useCallback(() => {
setLoading(false);
}, []);
useEffect(() => {
router.events.on('routeChangeStart', handleStart);
router.events.on('routeChangeComplete', handleComplete);
router.events.on('routeChangeError', handleComplete);
// If the component is unmounted, unsubscribe
// from the event with the `off` method:
return () => {
router.events.off('routeChangeStart', handleStart);
router.events.off('routeChangeComplete', handleComplete);
router.events.off('routeChangeError', handleComplete);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<>
<Head>
@ -36,6 +72,8 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
{getLayout(<Component {...pageProps} />)}
</MDXProvider>
</ThemeProvider>
{loading && <VercelLoading />}
</>
);
}