web: behaviour: add loading view to dashboard

[aoldershaw]

Existing Issue

Fixes #2935 (this time on 6.x).

Why do we need this PR?

As with #5427, add a spinner to the dashboard before
any API responses come back. Note that this isn't as useful for 6.x
since typically the user will have a cached API response, which is very
quick to load. However, it's easy to do, so might as well!

This commit uses a slightly different design than
#5427 - rather than having any text next to the
spinner, just display a spinner (in the center of the screen). I don't
have strong opinions either way, but the thinking was that we probably
don't need to tell the user what a spinner means! Happy to change it
to match the other design, though.

Changes proposed in this pull request

• Add a loading spinner on the dashboard page before any pipeline data (from the API or from cache) comes back
• Note that it's based solely on pipeline data because, even without job data, we display empty pipeline boxes (which is more useful than just a spinner)

Contributor Checklist

• Unit tests
• Updated release notes (located at https://github.com/concourse/concourse/tree/master/release-notes)

Reviewer Checklist

• Code reviewed
• Tests reviewed
• Release notes reviewed
• PR acceptance performed

[zoetian]

Ugh, I have a super lame question here... I cannot reproduce it on local... (help? @aoldershaw ).....
So I tried to set the throttling upload 30kb/s, download 40kb/s, latency 600ms with both no pipeline set and 2 pipelines unpaused statuses, then loginned. I still did not see the centered loading spinner... How to reproduce this? Thanks!

[aoldershaw]

@zoetian ah, should probably have made it more clear in the PR description. The loading screen only appears before any pipelines come back, which could be over the network, but most of the time it'll come from cache first. So 90% of the time, you won't even see the loading screen since the pipelines are almost always cached, but e.g. on the first load in a while, this may be useful.

So, basically, to reproduce it, you'll need to throttle your network as you did, and clear the pipelines field in localStorage (can do that in the Application tab in the dev console)

[zoetian]

👍 LGTM!
(It's actually quite hard to reproduce this in browser for me. Even after clear the localStorage for pipelines and jobs...)