search

erikras / react-redux-universal-hot-example

A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
MIT License
12k stars 2.5k forks source link

Scrolling to the top of the same page when link is clicked with asyncConnect #1053

Open mmahalwy opened 8 years ago

mmahalwy commented 8 years ago

I am going from Homepage -> Container A that has an asyncConnect. Once I click on the link to go to the container, the page scrolls to the top, the url changes but I am still on the Homepage until the promises in asyncConnect resolve. It's a bad experience because it scrolls to the top although it has not done a route change yet other than the url.

Thoughts how to fix this? CC: @sars

tearsofphoenix commented 8 years ago

Maybe use a loading page when request data?

AnuragSinghTomarr commented 8 years ago

loading page means what can you elaborate it.

mmahalwy commented 8 years ago

@tearsofphoenix @AnuragSinghTomarr sorry for the late response. Seems like what is happening is when a user clicks on a link, the url is rewritten to the new link but @asyncConnect prevents rendering until all promises are resolved. Naturally, when you click on a new link the browser would scroll to the top (since using scroll-behaviour), but it's really weird when it scrolls to the top, url rewritten but the rendering of the next page has not come in yet. This might be a problem with asyncConnect re: @sars and should not scroll to the top until the promises resolve.

Thoughts?

AnuragSinghTomarr commented 8 years ago

So is there any solution for this

mmahalwy commented 8 years ago

@AnuragSinghTomarr not that I have found. Seems like redux-async-connect needs to have some deep work into react-router/scroll-behavior to fix this