Design loading feature for megamenu and mobile menu

NCIOCPL / ncids

NCI Design System

7 stars 5 forks source link

Design loading feature for megamenu and mobile menu #546

Open meglake opened 1 year ago

meglake commented 1 year ago

Need a loading feature for mega menu and mobile menu to inform the user that the menu is in the process of being loaded for slower connections.

Sub-Tasks

DS Sprint 7 [SP: 2]

[x] Review USWDS to determine if there is a usable component for the loading feature

DS Sprint 8 [N/A]

[x] Setup conversation with design and dev to establish best next step [Discussed this during dev backlog grooming on 1/5/23. See comment for details of this conversation.]

On hold while development work is underway

[ ] Mock up loading feature for megamenu and mobile menu
[ ] Review with design and dev teams and revise as needed
[ ] Get sign off from clients
[ ] Create build ticket

Notes

monika-jaeger commented 1 year ago

Looks like USWDS has a loading indicator in V3 as an svg. https://github.com/uswds/uswds/blob/e75f3f3/packages/usa-file-input/src/img/loader.svg I am not sure if we can pull this in from V3? We'll need to take a developer to take a look at this.

If we can't use V3, then we can look at other options. I saw others mention in the GSA Slack channel that another option is to pull a spinner icon from Font Awesome and use the fa-spin class to animate it.

blilianyu commented 1 year ago

CMS's design system is also based off of USWDS. Their loading icon is much smoother than USWDS V3. Could be a possibility to just use this and customize the color?

https://design.cms.gov/components/spinner/?theme=core

laurelthrash commented 1 year ago

Discussed this issue during Dev Backlog Grooming on 1/5/23 - @bryanpizzillo identified that there is a 2.0 loader that is hidden in USWDS source code. We will move forward with development using the the 2.0 loader to visualize and obtain subsequent approval from the client. Thus, we will hold on any comps related to the loader while development work is underway. C.gov ticket #574 is in progress.

Cc: @meglake @blilianyu @monika-jaeger

laurelthrash commented 1 year ago

Counted SP 2 in DS Sprint 8, as rollover from DS Sprint 7. Moving to Approved Backlog while development work is underway.