Did the preloader implement correctly?

Question

React

Unfortunately, the code is not at hand now, I will try to describe in words in more detail.
There is a Catalog component with pagination. The data for it is taken from the repository. The directory subscribes to the change event in its store and calls .setState() with the new data from the store.
When rendering the Catalog, a check is made, if its state is empty, then the preloader is rendered, if not, the content.
When navigating through pagination, the action of loading the data of a new catalog page is called: first, the storage is cleared and the event of its change is fired, and then the data of the new page is loaded into the storage by Ajax, and when the download is completed, the storage change event fires again. It turns out that when the storage is cleared, the Catalog renders the preloader and, upon loading, changes it to content.
I also use a similar preloader output method in other components (each has its own storage). Thus, several components with their own preloaders can be displayed on the page.
Is the approach chosen correctly to show the preloader while the data is loading by resetting the storage and state of the component, respectively? Or this implementation is not quite correct?

Answer 1

You seem to be relying on side effects. If there are no products or the server returned an error, then the state will remain empty and the user will look at the preloader for an infinitely long time.
The preloader is shown only in one specific case: the request to the server left and has not yet returned.