hookrouter icon indicating copy to clipboard operation
hookrouter copied to clipboard

Why might my navigation be delayed?

Open tremby opened this issue 6 years ago • 1 comments

In a certain use case I'm triggering a "toast" popup message and then navigating the user to a different page via navigate. The popup isn't part of the dom tree which the navigation will replace, so it should still show on the new page.

The behaviour I'm seeing is the popup message appearing, and the navigation then only taking place after the popup has disappeared, whether on its 5-second timeout, or when the user manually dismisses it.

I added some console.log statements before my notification call, between that and the navigate call, and after the navigate call. All of these appear in the console before I actually get navigated to the next page.

The notification thing works via a hook in the page component which grabs a context, which contains a method to call. I call that method, which acts on a reducer which exists somewhere up the dom tree.

I can swap the order of navigate and notify and things work as I expect; I just want to understand what's happening here.

Why is navigate waiting for my popup to disappear before it takes action? How is this happening?

I'm using Firefox in case that's relevant.

tremby avatar Sep 20 '19 22:09 tremby

A similar behavior is happening to me. I have a drop down where, when I select a value I navigate to another page. Scenarios

  1. When no navigation is added the drop down works smoothly. You select it and it closes
  2. When navigation is added. It becomes jittery, you select a value it remains open and closes only after the new content is loaded.
  3. I also tried to add a seTTimeout of 100ms to the navigate to give the drowdown time to close and then navigate. This infact is adding even more delay then regular navigation. After increasing the timeout to 150 the dropdown closes smoothly but still there is delay beyond 150ms while executing the navigate
  4. Infact if I replace my navigate with window.location everything works smoothly. So there seems to be an error in the way navigation is working currently it is causing a lot of lag on the UI for some reason

StallionV avatar Oct 02 '19 04:10 StallionV