How to fix data loading in react-paginate?

Question

React

While the data is being loaded, the word Loading... is displayed, indicating that it is being loaded.
But when switching from one page to another , the first page (as the active one) is always returned, even though the content changes.
In this regard:
1) How to make the correct page displayed? Everything worked before the Loading setup.
2) How to make sure that the word Loading is not alone on the screen during loading, but is in place of the data being loaded?

https://codesandbox.io/s/eager-oskar-471xm?file=/s...

Answer 1

While the data is loading, you destroy the pagination component, respectively, every time the page changes, it is recreated - therefore, its internal value of the current page is constantly defaulted.
Explicitly tell the pagination component which page to consider as the current page ( forcePage={currentPage}).
Remove +1 from the page selection handler, add one when requesting (it's easier to correct the value of the current page in one place than in two - this would also have to do -1 when specifying the page to the pagination component).

Answer 2

Something like this? https://codesandbox.io/s/young-cloud-l2l0x?file=/s...