Initial build

[blackfalcon]

Alaska Airlines Pull Request

This PR represents the initial build of the auro-loader repo

https://github.com/AlaskaAirlines/auro/issues/219

Type of change:

Please delete options that are not relevant.

• [x] New capability
• [ ] Revision of an existing capability
• [ ] Infrastructure change (automation, etc.)
• [ ] Other (please elaborate)

Checklist:

• [x] My update follows the CONTRIBUTING guidelines of this project
• [x] I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!
-- Auro Design System Team

[joshbenard]

@blackfalcon I think loaders are a big opportunity to surprise and delight. More of an airline theme would be fun! (takeoff/landing?)

Looks pretty neat though and I'd love consistency in this space. The only real feedback is that the non-spinners (ping/ripple/pulse) move a little too fast for me to feel calmed down that I am waiting for something to load, and kinda make me amped up.

[blackfalcon]

Looks pretty neat though and I'd love consistency in this space. The only real feedback is that the non-spinners (ping/ripple/pulse) move a little too fast for me to feel calmed down that I am waiting for something to load, and kinda make me amped up.

Points are taken. In response, these loaders are pure CSS with simple HTML (inside the CE). I'd like to stay away from adding dependencies like SVGs if possible or having to generate gifs for these.

Also, in regards to timing, that can be adjusted.

[clockeby]

I like your logic on componentizing this for consistency, but I also like the idea of a more brand-style design. Why the hesitation on an SVG dependency?

[clockeby]

Could something like this be done with CSS shapes & masks?

[blackfalcon]

@clockeby

Why the hesitation on an SVG dependency?

I guess I could bake the SVG into the CE. Something like clouds wouldn't be part of the Auro Icon lib, so sure, SVGs back on the table!

[alaskaryan]

[amatlock1]

A couple of the loader types made me think of WCAG flashing guidelines (flashing can cause seizures). I don’t know all the details around the guidelines but I’m including it here to review: https://www.w3.org/TR/WCAG20/#seizure-does-not-violate

[littleninja]

Homepage has a loading plane and loading cloud. The plane gif actually demonstrates why we added “cloud”: we didn’t want skyscraper backgrounds to create a 9/11 effect. 😬

[blackfalcon]

@amatlock1 The CSS that drives the animation is responsive to users who prefer reduced motion. This is the main reason why I want to get the loaders into code so that we can control this. Gifs would need to be wrapped in other code to support this feature and that is too hard to police.

https://github.com/AlaskaAirlines/WebCoreStyleSheets/blob/master/src/_core.scss#L36-L40

update:

In fact, I am going to bake this into the loader itself to ensure that the a11y feature is there even if users don't load WebCodeStyleSheets.

[blackfalcon]

@amatlock1 took your a11y point to the next level. By default, Auro will over-ride all animations when reduced motion is turned on. But in the close of loaders, there is something missing there with the animations just being stuck. So, see this. https://github.com/AlaskaAirlines/auro-loader/commit/797248ef616d9f18293169a0fc1db221e314318c

The idea here is that when reduced motion is checked, the loader animation will be replaced with the string Loading...

This update is available at http://auro-loader.surge.sh/components/auro/loader

Standard view

With reduced motion

[littleninja]

Thoughts on linear vs non-linear animation speeds? Asking I’m from curiosity, I’m okay if we defer this.

The cloud on homepage has non-linear interpolation (not sure if it’s ease-in, ease-out or otherwise).

[blackfalcon]

Thoughts on linear vs non-linear animation speeds? Asking I’m from curiosity, I’m okay if we defer this.

The cloud on homepage has non-linear interpolation (not sure if it’s ease-in, ease-out or otherwise).

This is the design feedback I am interested in. The cloud loader I built for this demo didn't really take a whole lot of nuance like that into account. There is a meeting scheduled with designers to discuss options.

thanks for the feedback!

[alaskaryan]

@blackfalcon I don't see a use case for the cloud loader currently. However; here is an example of the fluidity and sequencing I would like to see in our circle loaders. https://codepen.io/jczimm/pen/vEBpoL

[alaskaryan]

@blackfalcon also, here is what we use for a content loader on food https://codepen.io/bloom-dan/pen/OXYQay

[alaskaryan]

@blackfalcon also, there are different types of loaders...i'm wondering if we need to separate them here in github. Content loader, data loader, interstitial loader, etc.

[blackfalcon]

@blackfalcon I don't see a use case for the cloud loader currently. However; here is an example of the fluidity and sequencing I would like to see in our circle loaders. https://codepen.io/jczimm/pen/vEBpoL

This loader was inspired from @littleninja posting of a use case on the home page.

@blackfalcon also, here is what we use for a content loader on food https://codepen.io/bloom-dan/pen/OXYQay

Yes, but I would argue that the shimmer is a different custom element.

@blackfalcon also, there are different types of loaders...i'm wondering if we need to separate them here in github. Content loader, data loader, interstitial loader, etc.

I am open to having categories of loaders much like how we have them in auro-icon

[blackfalcon]

I want to thank everyone for their feedback on this. It was decided to go with a limited set of loaders for the v1.0 version of auro-loaders. Moving forward @vidalmenAS as offered to take the lead to help this new component grow and fir the needs of the design org as a whole.

Current candidate for consideration v1.0 http://auro-loader.surge.sh/components/auro/loader

[AuroDesignSystem]

:tada: This PR is included in version 1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: