hackforla / hackforla/311-data

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

Open
#2,059 1 comment 0 reactions 0 assignees View on GitHub
Complexity: Small p-feature: loading bar Role: Frontend size: 2pt
Dominant language
JavaScript
Stars
73
Forks
74
PR merge metrics
No merged PRs in 30d

Description

### 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](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=21112-10251&t=8FgNd3f0bssBgTnh-4)
- Related Design Ticket: [UXD - Progress Modal Ticket #1945](https://github.com/hackforla/311-data/issues/1945)

Screenshot before proposed changes

Image

Screenshot of Figma


Image

Screenshot of new feature from localhost


[insert screenshot here]

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.