Skeleton screens with determinate progress?

Question

I'd like to use skeleton screens to indicate when a page is loading. Usually, this is great—it makes the experience seem faster while still functioning as a progress indicator.

The thing is, skeleton screens are at best indeterminate progress indicators: they tell the user that something is loading, but don't give any indication as to how long that might take.

I have a screen in mind that sometimes take a while to load. The system will attempt to load the screen for up to 30 seconds, at which point it will display an error. I feel like a determinate loading indicator would be better here—It lets the user know that they have a finite amount of time to wait before the screen finishes the process it is in.

Can you think of a way to combine the two? A skeleton screen for a few seconds with a determinate spinner that shows up after? Am I wrong to want to show a determinate progress indicator?

Answer 1

I've seen sites with a very thin horizontal loadbar at the top (or bottom) of the page. It scales to the right relative to the level of completed data transfer. Just like a download progress bar. When the download is complete it could scale down in half-a-second so the loaded page eases into place instead of jumping up 2-6 pixels.

Edit: Here's an example: http://onextrapixel.com/examples/youtube-like-ajax-loading-bar/index.html

Answer 2

Use skeleton screens while you progressively render your content, and a progress indicator over the chart while it loads.

Doing these things ensures that users have visibility of system status. Skeleton screens are excellent for conveying momentum, and letting your user know that something is happening. Progress bars should be used to indicate momentum for any action that takes 10 seconds or longer to complete. Provide additional text feedback that updates with the percent completed when possible (for example, "Loading ").

^{download bmml source – Wireframes created with Balsamiq Mockups}

Another thing to consider is progressively loading your chart. Are you able to load any parts of the chart before receiving the entire dataset? The title and legend? Parts of the data? If so, perhaps you can find a way to progressively render the chart also, though this might be more complicated than using a progress bar.