Add page loader that prevents default route change

[igorbumba]

PageLoader.tsx

import { useEffect, useRef } from 'react';
import cn from 'classnames';
import { gsap } from 'gsap/dist/gsap';
import SingletonRouter, { Router } from 'next/router';
import styles from './PageLoader.module.scss';

const PageLoader = () => {
    const $loader = useRef<HTMLDivElement>();

    useEffect(() => {
        // @ts-ignore
        if (!SingletonRouter.router?.change) {
            return;
        }

        // @ts-ignore
        const originalChangeFunction = SingletonRouter.router.change;
        const originalOnBeforeUnloadFunction = window.onbeforeunload;

        // @ts-ignore
        SingletonRouter.router.change = async (...args) => {
            // get variables from the args
            const [, , as, options] = args;

            // check if shallow routing
            const isShallow = !!options?.shallow;

            // check if you are on the same URL
            const changedUrl = as.split('?')[0];
            const sameURL = SingletonRouter.router.pathname === changedUrl;

            if ((sameURL && isShallow) || (sameURL && !isShallow)) {
                // @ts-ignore
                Router.prototype.change.apply(SingletonRouter.router, args);
            } else {
                gsap.to($loader?.current, {
                    duration: 0.3,
                    autoAlpha: 1,
                    onComplete: () => {
                        // @ts-ignore
                        Router.prototype.change.apply(SingletonRouter.router, args);
                    },
                });
            }
        };

        const handleRouteChangeComplete = () => {
            gsap.to($loader?.current, {
                duration: 0.3,
                autoAlpha: 0,
            });
        };

        SingletonRouter.router.events.on('routeChangeComplete', handleRouteChangeComplete);

        /*
         * When the component is unmounted, the original change function is assigned back.
         */
        return () => {
            // @ts-ignore
            SingletonRouter.router.change = originalChangeFunction;
            window.onbeforeunload = originalOnBeforeUnloadFunction;
            SingletonRouter.router.events.off('routeChangeComplete', handleRouteChangeComplete);
        };
    }, [$loader]);

    return <div ref={$loader} className={cn(styles.wrapper, 'js-loader')} />;
};

export default PageLoader;

[igorbumba]

PageLoader.module.scss

.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--body-bg-color);
    z-index: 99;
}