57b050f196
make a hook to abstarct logic from page changes to .prettierrc changes to a couple of imports/exports bunch of screen reader tweaks
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { useCallback, useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
|
|
/**
|
|
* for showing progress bar. could've used nprogress package, but didn't feel like it
|
|
* @returns isPageLoading: as the name suggests.
|
|
* @returns key: a unique key(in reality, a part of url) telling whether the page has changed or not
|
|
*/
|
|
const useIsPageLoading = () => {
|
|
const router = useRouter();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleStart = useCallback(() => setIsLoading(true), []);
|
|
const handleEnd = useCallback(() => setIsLoading(false), []);
|
|
|
|
useEffect(() => {
|
|
router.events.on('routeChangeStart', handleStart);
|
|
router.events.on('routeChangeComplete', handleEnd);
|
|
router.events.on('routeChangeError', handleEnd);
|
|
|
|
return () => {
|
|
router.events.off('routeChangeStart', handleStart);
|
|
router.events.off('routeChangeComplete', handleEnd);
|
|
router.events.off('routeChangeError', handleEnd);
|
|
};
|
|
}, [router, handleStart, handleEnd]);
|
|
|
|
return { isPageLoading: isLoading, key: router.asPath };
|
|
};
|
|
|
|
export default useIsPageLoading;
|