Provide more granular loading states and messages in the app to tell the user (and us) what is currently loading, and if anything specific has failed to load.
Context
Right now, we have mostly just general spinners that hide the main chart components when the data is loading - this includes both first load, and currently also when data is being refetched (which is potentially jarring and frustrating as a user, I would personally rather see the current, existing data in the cache, even if slightly "stale", rather than no data and a spinner.
Possible Implementation
Finish implementing a "skeleton view" of all charts, so they can load and render as empty before the data has loaded in;
Ensure the loading states of various API calls are kept in separate variables, and potentially use each of these to inform a state machine to determine the App's current state of loading; some data will be similar/related, so can share the same Loading Message, and these messages can represent discrete states of the currently loaded App data.
An example of these states could be:
PV Forecast and Delta views specific
Loading data... [no data has fully loaded yet / multiple data requests active and have state of loading]
Loading Forecast data... [PV actuals have loaded, forecasts are pending]
Loading PV data... [forecasts have loaded, PV actuals are pending]
Loading GSP data... [National data loaded, GSP data request pending]
Refreshing data... [existing data for PV and Forecasts, both API calls pending/loading]
Refreshing Forecast data... [existing data for PV and Forecasts, only Forecast API call pending]
Refreshing PV data... [existing data for PV and Forecasts, only PV data call pending]
Detailed Description
Provide more granular loading states and messages in the app to tell the user (and us) what is currently loading, and if anything specific has failed to load.
Context
Right now, we have mostly just general spinners that hide the main chart components when the data is loading - this includes both first load, and currently also when data is being refetched (which is potentially jarring and frustrating as a user, I would personally rather see the current, existing data in the cache, even if slightly "stale", rather than no data and a spinner.
Possible Implementation
Finish implementing a "skeleton view" of all charts, so they can load and render as empty before the data has loaded in;
Ensure the loading states of various API calls are kept in separate variables, and potentially use each of these to inform a state machine to determine the App's current state of loading; some data will be similar/related, so can share the same
Loading Message
, and these messages can represent discrete states of the currently loaded App data.An example of these states could be:
Loading data...
[no data has fully loaded yet / multiple data requests active and have state of loading]Loading Forecast data...
[PV actuals have loaded, forecasts are pending]Loading PV data...
[forecasts have loaded, PV actuals are pending]Loading GSP data...
[National data loaded, GSP data request pending]Refreshing data...
[existing data for PV and Forecasts, both API calls pending/loading]Refreshing Forecast data...
[existing data for PV and Forecasts, only Forecast API call pending]Refreshing PV data...
[existing data for PV and Forecasts, only PV data call pending]Loading Sites...
[getSites request loading]Loading Sites Forecast data...
[sites PV data loaded, sites forecasts pending]Loading Sites PV data...
[sites forecast data loaded, PV data pending]