DEV- Update progress modal with countdown and "please wait" message

[cottonchristopher]

Overview

We need to implement new designs to the progress modal with the language that indicates time remaining to load and the "please wait" message so that we decrease the numbers of users who abandon the process.

More Details

• no need to implement the backend facing requirements of loading data in chunks, this will come in an upcoming ticket

Action Items

• [ ] implement loading bar component
  • [ ] as a prop, it should receive the % loaded number
• [ ] loading modal text should be: "Please give us a moment while we load the map. For official information about 311 services, please visit MyLA311."
  • link remains the same as previous copy
• [ ] replace spinner gif with loading bar
• [ ] loading modal component should now receive a prop to change into the longer version of the text (e.g. bool: loadingDelayed)
  • [ ] delayed message should be ""Please give us a moment while we load the map. Load times may vary for different devices. For official information about 311 services, please visit MyLA311."

Resources/Instructions

• Figma Section: Uploading Modal
• Related Design Ticket: UXD - Progress Modal Ticket #1945

Screenshot before proposed changes

Screenshot of Figma

Screenshot of new feature from localhost

[insert screenshot here]