search

AlaskaAirlines / auro-loader

A custom element for the purpose of illustrating animated loaders
https://auro.alaskaair.com/components/auro/loader
Apache License 2.0
0 stars 1 forks source link

Initial build #1

Closed blackfalcon closed 3 years ago

blackfalcon commented 3 years ago

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.

Checklist:

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

image

blackfalcon commented 3 years ago

@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 commented 3 years ago

Frame 1

amatlock1 commented 3 years ago

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 commented 3 years ago

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. 😬 8C217ED0-F57F-4384-8035-1080DC814FA1 8547D2D5-9AEF-4119-BC9B-A5249AC7AEFD

blackfalcon commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

alaskaryan commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

The release is available on:

Your semantic-release bot :package::rocket: