Issue/365 loading states

[braddf]

Pull Request

Description

Add some loading states, similar to those suggested in the below issue. Not from designs, so testing and feedback welcome!

• On initial load, and therefore when no data has been loaded yet, the skeleton graph displays the main spinner.
• Data in the app is now "de-duped", so the same API route will not be requested with the same parameters if the latest response is less than 2 minutes old.
• On 'refresh' of the data, which happens either from the 5 minute background timer having elapsed, or from a user interaction e.g. with the charts after the 2 minute 'de-dupe' timeout having elapsed, the API requests are re-fetched and the loading message appears.
  • If more than one request is currently pending, "Loading latest data" is displayed;
  • If only one request is pending, the message specifies this, e.g. "Loading latest GSP forecast" – this one shows more often, because at the moment it is large/slow, and called perhaps more often than needed, as @rachel-labri-tipton, @devsjc and I have been discussing recently. I notice from the screenshot below that the message is also perhaps a bit long, so might want shortening.

Fixes #365

How Has This Been Tested?

Locally, forcing API to update every 30 seconds and also manually triggering updates to different API endpoints to check messages.

• [x] Yes

Checklist:

• [x] My code follows OCF's coding style guidelines
• [x] I have performed a self-review of my own code
• [ ] I have made corresponding changes to the documentation
• [ ] I have added tests that prove my fix is effective or that my feature works
• [x] I have checked my code and corrected any misspellings

Screenshots of example loading messages:

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nowcasting-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 4, 2023 4:39pm
nowcasting-website	✅ Ready (Inspect)	Visit Preview		Aug 4, 2023 4:39pm

[peterdudfield]

Thanks @braddf for doing this. I've had a look on the preview vercel site but I couldnt see any loading states.

Perhaps they are not meant to be visible? If so where are they? and is it just for us internally to use? If not, could add a few screen shot to the PR of these features?

Thanks

[braddf]

@peterdudfield have amended description, hopefully should be clearer before and I can see why you may not have seen it in the Preview deploy! Have to have the tab open and check back in after 2 mins to see it in the wild – this might not be how we want it, open to discussion! 👍

[peterdudfield]

@peterdudfield have amended description, hopefully should be clearer before and I can see why you may not have seen it in the Preview deploy! Have to have the tab open and check back in after 2 mins to see it in the wild – this might not be how we want it, open to discussion! 👍

Thanks @braddf , I now see them.

I think they are useful and handy and give some nice user feedback. How do you feel about the design of them?

[braddf]

I feel like is a good v1 - I don't like designing in a vacuum so keen to get them onto development etc. to get prompt some feedback but they seem to be doing what I hoped they would, and show promise for further feature expansion I think? 👍