Next.js Router events should handle the progress bar well. It works

Doesn't work on next.js after single run about rsup-progress HOT 3 CLOSED

abhijithvijayan commented on May 26, 2024

Doesn't work on next.js after single run

from rsup-progress.

Comments (3)

skt-t1-byungi commented on May 26, 2024 1

If the start and end periods are short, progress does not appear. If you need a minimum animation, there is also a solution below.

   useEffect(() => {
        const progress = new Progress();
        let pMin = null

        Router.events.on('routeChangeStart', () => {
            progress.start()
            pMin = new Promise(r => setTimeout(r, 100)) // <= `100` is minimun animation time
        });
        Router.events.on('routeChangeComplete', () => {
            return pMin.then(() => progress.end());
        });
        Router.events.on('routeChangeError', () => {
            return pMin.then(() => progress.end());
        });
    }, []);

(The animation starts at the next frame after calling the start function. If the end is called before that, it should not appear.)

from rsup-progress.

abhijithvijayan commented on May 26, 2024

Thanks. it works.

For anyone who stumbles across this, here is the typescript version

    useEffect((): void => {
        const progressBar: Progress = new Progress();
        let timer: null | Promise<any> = null;

        Router.events.on('routeChangeStart', (): void => {
            progressBar.start();
            timer = new Promise((resolve) => {
                return setTimeout(resolve, 100);
            });
        });
        Router.events.on('routeChangeComplete', (): void => {
            if (timer) {
                // wait for promise to resolve(ensures min 100ms animation)
                timer.then((): undefined => {
                    return progressBar.end();
                });
            }
        });
        Router.events.on('routeChangeError', (): void => {
            if (timer) {
                timer.then((): undefined => {
                    return progressBar.end();
                });
            }
        });
    }, []);

from rsup-progress.

skt-t1-byungi commented on May 26, 2024

Okay, I supplemented the readme as your advice.

from rsup-progress.

Recommend Projects