Loading Animation on FL Community Care Services

[Agile6MSkinner]

Description

On the Facility Locator the Community Care Services list does not immediately load because it has to query PPMS. While this is happening, users may feel like they are stuck or not realize there will be service options if it takes a while to load.

Instead of immediately showing the services field We will add a loading animation as shown in these designs

Existing DS loading indicator: https://design.va.gov/components/loading-indicator

User story

AS A user searching for services at a community care provider I WANT a loading animation to show while data is being retrieved SO THAT I know that there will soon be an option for me to select a service type

Engineering notes / background

Analytics considerations

Testing & QA

Scope / Impact analysis

What, if anything, could break as a result of this change? Engineer should assess this when approaching PR.

Roles / assignments

After functional testing, code review, accessibility review, and design review can happen in parallel.

• [ ] Functional testing:
• [ ] Code review:
• [ ] Design review:
• [ ] Accessibility review:
• [ ] Product acceptance:

Acceptance criteria

• [ ] When user selects Community Providers in facility type, the service selector box does not immediately appear
• [ ] In its place, a loading animation displays and persists until PPMS data is loaded
• [ ] When PPMS data loads, animation is replaced by the services selector
• [ ] If PPMS data does not load, remove animation and replace with error message created in #19801
• [ ] Impact analysis is filled out and QA test plan is updated accordingly
• [ ] Does this product have an existing regression test plan?
  • [ ] Yes, link:
  • [ ] No, regression test plan will be created as part of the work / points in this ticket

[jilladams]

@thejordanwood got voluntold to add the DS paradigm for loading indicator into Figma to make this ticket workable. Thank you Jordan.

[thejordanwood]

@Agile6MSkinner Dave has already shown how this should look in Figma. The loading indicator in the Figma file is from the Figma design system, but to see how it looks when animated you can view it on this page of the design system.

I believe this is all that's needed, but let me know if you have anymore questions!

cc: @davidmpickett