Better loading UX

[bmaupin]

Cases

1. When the API isn't running and the data isn't cached
   • Current: Loading spinner
   • Desired: Loading spinner with message along the lines of the API is starting and can take up to 30 seconds
2. When the API is running and the data isn't cached
   • Current: No loading spinner
   • Desired: Loading spinner with no message
3. When the API is running and the data is cached
   • Current: No loading spinner
   • Desired: No loading spinner (this would cause a flash every time the chart is loaded or changed)

Ideas

Idea 1

Could it be possible to create 1 loading spinner component to cover all of these scenarios? It wouldn't be very elegant, but one idea would be to:

• Wait up to N ms before showing the loading spinner
• Wait up to N s before showing the message

That would cover all the cases and show the spinner and/or message only when needed...

Idea 2

Problem with this approach: How can we differentiate between case 1 and 2? The UI would have no way of knowing if the API was stopped.

Create a component and use various states to indicate what should happen. For example, if it was used as a parent component and the chart was a child:

• For case 1, show the loading spinner + message and don't show child components
• For case 2, show the loading spinner and don't show child components
• For case 3, show the child components