Flight Icon Request: loading and run

[amyrlam]

Outline the use case for the new icon.
1:1 replacement for existing structure icons

If there's a similar existing icon, why isn't it a good fit? Please describe.
Flight doesn't have animated icons rn

Describe alternatives you've considered.
N/A

Additional context

• Command - F on this page to see the legacy structure icon loading that's used in cloud-ui production currently: https://unpkg.fly.dev/@hashicorp/structure-icons@1.9.2/dist/index.html
• run is the only other icon without a mapping. Am not sure where it's being used yet
• Mapping structure to flight: https://github.com/hashicorp/flight/blob/main/structure-mappings.json#L79
• Shared by @meirish on Slack

[meirish]

I think the run icon is used on TFC run states, or that was the intended target

[jesdavpet]

Just wanted to +1 @amyrlam on the need for parity by adding an animated loading icon, WRT our discussion on Slack today.

TL;DR

• lack of a loading icon necessitates mixing both old and new icon libraries in the HCP Portal UI
• mixing icon libraries results in inconsistent and visually jarring spacing and alignment differences
• working around this with hacky one-off CSS is not ideal, would prefer to use a single icon library

[amyrlam]

Context:

• It sounds like the loading icon is used more, so it is likely higher priority over run.
• Note that in Structure, loading is its own component: https://structure.hashicorp.vercel.app/?path=/story/components-loading--index
• But some of the styling for loading is in structure-icons https://github.com/hashicorp/structure-icons/blob/91a2d6116b716ef109becec73502263066a9062d/README.md#updating-icons

Next steps (I think these are the next steps):

• @cveigt will start working on this issue but a due date is unclear
• For now it is preferable to use a manual CSS override for Structure loading, in conjunction with Flight icons.

[didoo]

Some things I noticed and I posted in an internal thread, and I am reposting here for context (it is not exhaustive, please take it just as extra info):

in Structure library in Figma seems there are two icons, loading and run

how the animation for the loading icon is done in Structure:
https://github.com/hashicorp/structure/blob/main/packages/pds-ember/public/structure-icons/loading.css
there are two animations (fancy and simple) controlled via a media-query

this code is duplicated here:
https://github.com/hashicorp/structure-icons/blob/a3d53fbca427c54abcca216974834648ded89a5f/src/loading.css
not sure why

this is how the animation is done for the run icon
https://github.com/hashicorp/structure-icons/blob/a3d53fbca427c54abcca216974834648ded89a5f/src/run.css

/cc @ cveigt for context (see all thread above)

[sabrinako]

+1 for loading, the Waypoint UI uses this Structure icon. Just wanted to add another data point 🙂

[cveigt]

Update: We are bringing both "loading" and "running" icons to the next version of Flight.

For more context

We (the DS team) talked to some product designers and have taken into consideration a variety of use cases through HCP and TFC, as well as their feedback during the design phase.

They can be found already within Figma in the latest release the team made today.

We'll be adding some documentation to the website regarding usage soon.

Side notes
@didoo here's the Codepen for reference on the animation.

On Accessibility: On the eng side, we should add a media query to support prefers-reduced-motion, though I'd like @MelSumner to confirm this. Don't think the icons need alternate styling, animation: none would be enough.