holy-loader icon indicating copy to clipboard operation
holy-loader copied to clipboard

delay in loader display

Open roo12312 opened this issue 1 year ago • 5 comments

hi im using router.push() from next/navigation. whenever I try to navigate the loader doesn't start on the go.. at the very end of the page load it starts showing.

roo12312 avatar Mar 12 '24 11:03 roo12312

This is due to router.push() only firing at the end (when your page has loaded). I perceived the same behaviour when trying this out with nextjs. I'm not aware of any other events to listen to that trigger earlier. Do you have any suggestions?

tomcru avatar Mar 12 '24 16:03 tomcru

Is it better to create a new router hook where we can manually track when the router.push is run

roo12312 avatar Mar 12 '24 17:03 roo12312

hi is there an update or fix for this? the delay when using router.push ?

monkeystylle avatar May 03 '24 03:05 monkeystylle

I don't believe this is possible, because the router.push event only fires once the page has already loaded. Unless you are aware of another way we could implement this.

We did, however, just add 2 new funcs with which you can manually start & stop the loader:

'use client';

import { startHolyLoader, stopHolyLoader } from 'holy-loader';

startHolyLoader();
stopHolyLoader();

So you should be able to do:

startHolyLoader();
router.push('/your-page')

Make sure you are on the latest version (2.3.1) for these to be available. You can run npm upgrade holy-loader to update.

tomcru avatar May 03 '24 08:05 tomcru

hey thanks, after reading the docs, using startHolyLoader(); before router.push works.. thanks a lot

monkeystylle avatar May 03 '24 08:05 monkeystylle