Map should display a loading modal when it's retrieving new data

[nichhk]

Overview

Currently, it can take up to 25s for the dev site to pull data for the past month. We should display a loading modal in these situations.

Action Items

• Design a loading indicator.
• Display it when the client is retrieving data, and hide it when the client finishes retrieving data

Resources

• [EPIC] UI/UX Design Map Page H1 2023 #1380
• [EPIC] Engineering Maps Page H1 2023 #1396

[nichhk]

@elizabeth-ux and @melissahermes99, could you design a loading indicator for the map?

On the eng side, I've gotten a material-ui CircularProgress component to load, but it doesn't look good.

[melissahermes99]

I've come up with two test loading indicators for the map. The first indicator utilizes the logo and the second is just a simple loading bar. If neither of these is what we're looking for I can keep experimenting to find something that works. For now, you can find the UI for both indicators under the Map Loading Screen Test page.

I've gone ahead and created a quick prototype for both indicators as well.
https://www.figma.com/proto/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=5106%3A17198&scaling=contain&page-id=2375%3A0&starting-point-node-id=5106%3A17185&show-proto-sidebar=1

[nichhk]

Thanks Melissa! They look great. I prefer the first one, but would appreciate feedback from others! @elizabeth-ux @EchoProject any thoughts?

[EchoProject]

I also like the first. @melissahermes99 Is it possible to have the shimmer go in the other direction (from left to right)?

@nichhk The darkened state of the page while loading isn't currently a feature, correct? Are we building this in?
So every time the screen is loading it darkens? Makes sense for predictably long loads, but I feel like it'll be eye straining if the load happens quickly and possible more than once.

I think it'll look weird if the screen isn't darkened given the colors.

[melissahermes99]

I also like the first. @melissahermes99 Is it possible to have the shimmer go in the other direction (from left to right)?

I've updated the first loading indicator to move to the left.

[melissahermes99]

I have created a progress bar. I am not sure if looping it is a good idea, so I've slowed down the speed of it's progression. You can view it here.

[nichhk]

Thanks Melissa, this looks good to me! Was there any discussion last night about which loading indicator to go with?

[EchoProject]

I think we landed with the bar at the top, below the nav, would prompt as orange and then turn teal during the loading. The color change would not loop, and the background would not darken. @melissahermes99 am I missing anything?

[melissahermes99]

Sounds good! I did have to make a slight adjustment to the canvas to lower to bar just a bit. I had previously had it overlapping the header on accident. I've updated the color transitions as well to make the flow of the loading bar more smooth.

[nichhk]

Update for Killen: we already have an ugly loading indicator on the dev site, but we want to upgrade it to the one that Melissa designed. You can see how I added the ugly loading indicator here.

[mc759]

Hey @jekijo Do you have an update for us on this issue?

Please update:

• Progress:
• Blockers:
• Availability:
• ETA:

Thanks!

[jekijo]

Hey @mc759, I actually finished this issue a while ago and submitted a pull request (#1412 ). I didn't know the issue hadn't been closed yet, but I'll go ahead and do that now