Loading state for SPA – skeleton screens, loading indicators or both?
This question isn't about whether Skeleton screens are better than loading indicators in a general sense ---plenty of that found on Google. Rather, I'd like to get a sense of best practices for using either or both in one web app whose data changes frequently.
Here's the (super simple) scenario:
I have a web app that has 2 screens. The app is a "single page app", meaning that navigation, data fetching and UI rendering all happen within the browser without full page refreshes.
The 2 screens:
- A master list screen that shows a table, with rows populated with some summary data. Each row is clickable and when clicked will take the user to the second screen described below.
- A details screen which loads a more extensive set of data into a form to be edited. After successfully updating the data in the screen, the user is then redirected back to the list screen with a confirmation that their data was saved successfully.
One requirement this web app is that the data needs to be refreshed from the server whenever entering these 2 screens. So, when going between list and details, the screens must re-fetch data from the server and re-display that updated data. The same applies for initially deep linking to these screens. Another requirement is that the list data can be paginated and filtered, going to the server also for any of those requests. The server requests are usually fast on a fast connection (<.5 second), but could be slower for any number of reasons.
1) Skeleton screens - I like the idea of showing skeleton screens when initially loading the data for the list or details screens. However, when continually going between the list and details screens, would showing a skeleton screen before every fetch get annoying and become a distraction? It seems like the examples for skeleton screens on the web are for use cases where data is initially loaded but doesn't change much after that, even when transitioning between screens. In my case would just showing a loading indicator on the screen before fetching be a better UX?
2) For on-screen updates, such as in the case of filtering and paging data on the list screen, I'm assuming showing the skeleton screen would be even more annoying. In this case I'm assuming the user would like to just have the data updated in place in the list when returned from the server. Would this also be a case of just showing the loading indicator and updating the list immediately when its data is returned from the server?