In my home page, I have to load some posts and songs from the database. Currently, I initially set a loading state variable to true, and then inside a useEffect, perform a get request for the posts and songs, store them in state, and once they have been fetched and stored, then set loading to false. I would simply display a loading spinner if loading was true, else I would display and loop over posts and songs
However, I want to display the posts and songs as soon as they are available, therefore if the posts are loaded faster than the songs, I want to display the posts and then a loading spinner below the displayed posts, indicating the songs are still being loaded.
My current solution to this is to have two loading state variables for posts and songs, such as loadingPosts and loadingSongs, and then have the following conditions to check if they are loading:
loadingPosts && <Spinner /> : <div> Map over and display posts </div>
loadingSongs && <Spinner /> : <div> Map over and display songs</div>
However, I would like a cleaner and more concise method to handle this. After researching, I discovered react-query to potentially help with this issue. Could react-query be used to simplify this code? Also, are there any tradtional react methods to simplify this? Thanks.