search

willianjusten / nba-remix

A simple app to show NBA games and scores/details.
https://nba.willianjusten.com.br
208 stars 31 forks source link

Update revalidation with useFetcher #107

Closed GuilleAngulo closed 2 years ago

GuilleAngulo commented 2 years ago

Hey there 👋, Congrats on the amazing project!

Context

I noticed that, specially on mobile devices, the useRevalidateOnInterval will cause a scroll to top behavior as it reloads the page in order to fetch latest data.

Proposed solution

I was checking if there is an alternative way of revalidate data on the background, and found useFetcher that seems to fit! So the idea in this MR is to:

  1. Store the data to be shown into an state, and initialize that data with the loader
  2. Set that state with useFetcher data when revalidation begins

It seems to work, but not entirely sure that it would be the best way. Let me know your thoughts and feel free to ask any change you think appropriate 😃 ! I hope it can be helpful

Before (interval time 1seg)

https://user-images.githubusercontent.com/50624358/158805380-6c3e20a2-03ca-41dc-a15e-b81ca66117ad.mov

After (interval time 1seg)

https://user-images.githubusercontent.com/50624358/158805463-1cf73e6e-1e57-4535-952c-4a2b80c56dd1.mov

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/willianjusten/nba-remix/BSham4BLSHCup9zuWyz8FLNHB3EF
✅ Preview: https://nba-remix-git-fork-guilleangulo-add-use-fetcher-willianjusten.vercel.app

fsilvaco commented 2 years ago

I think the points raised by @helderburato are valid :)

Nice work, @GuilleAngulo! 🏀🚀

willianjusten commented 2 years ago

Awesome work here and good reviews from the others also, let's ship it!

GuilleAngulo commented 2 years ago

Glad it was helpful 🎉 , thanks for the careful review guys!