keepPreviousData is cool - but is it the right UI pattern?

[cmacdonnacha]

I just used keepPreviousData from here and it's really cool and all but wouldn't the user still want to know that something is happening while they wait for new data (the next page) to arrive? Just imagine a user on a slow network, they click "Next Page" but nothing is visibly happening because the old data is still displayed, so they click "Next page" a couple of more times in frustration. Whereas if they were given some feedback like a "Loading" spinner at least they'd know they have to wait.

Am I missing something?

[TkDodo]

There is an isPreviousData flag that you can use for that ;)

[cmacdonnacha]

Thanks @TkDodo for the quick reply! I suppose I'm trying to figure out why use that flag instead of just using isLoading?

[TkDodo]

well with isLoading, you have no data, so you'd have to display a big loading spinner. with keepPreviousData and the isPreviousData flag, you have the option to show the previous data and show a small background loading indicator somewhere. This is what the pagination example is doing in the docs.

what I personally like a lot is keeping previous data, and then showing a SkeletonLoader instead if isPreviousData. it makes me keep the same layout, e.g. the same number of items in a list, but I'm still getting a nicer feedback to the user :)

[cmacdonnacha]

Ah yea excellent point. At least this way you can also keep displaying the previous data if an error occurs while fetching the next page.

Thanks @TkDodo - Helpful as always ✅