Update Loading Modals (Dev)

[cottonchristopher]

Overview

We need to implement a loading modal that clarifies who our organization is while also cueing the user that data is still being loaded because the current implementation is ambiguous.

Action Items

• Modify the FactModal to make use of a click-trap (no clicking out)
• Adjust the modal backdrop to match the new Figma design
• Add another div to the FactModal component that will contains the 311 logo, loading gif, about-us blurb, and modal-footer
• Add a new state, prop, and callback for when the data is loaded in, e.g. onDataLoaded, ensure that the modal changes according to the design flow
• Add a div that renders when the data is loaded which contains the header, 311 blurb, and OK button
• Ensure that the modal remains open until the data has loaded, only closing when they click "OK"
• (optional) Rename FactModal to LoadingModal, or some other name that indicates that more than fun facts are being communicated on the modal

Resources/Instructions

• Loading Gif is provided in a few frames by design team, you may need to compile this into a gif, perhaps ask Design for assistance
• MUI Modal component docs
• Update Loading Modals after Feedback from Bonnie #1655
• Link to Figma File

Screenshot of Figma Section

[cottonchristopher]

After reviewing/estimating prelaunch tickets and time to launch PM's saw the need for an additional ticket related to another issue. #1655
Can we have Dev/Front-End team to complete the above ticket that has been started, adding/correcting information on the ticket/issue and indicate "size", etc.?.

[Skydodle]

Availability: M-F after 7pm PST
Completion ETA: Before 3/20 EOD