Saving indicator

[mebates]

Users need an indication that their work is saving, if their connection is slow or the amount of data is large. We've found this need in:

• CR data fields (right?)
• HMDA data fields
• SES Next
• Intranet Wizard Builder

Let's choose a visual style and a consistent way of building it. Should the word "Saving" accompany the symbol?

Two past examples:

[stephanieosan]

We're currently using the first one in OAH as an initial "loading" spinner. Slightly different use case, but worth considering since both loading and saving are a type of progress/something-is-happening indicator.

[jehlers]

We also use it in eregs for loading definitions when the connection is slow:

[Dnpizarro]

The first option is what we currently have in our minicon library. @himedlooff or @Scotchester can you confirm what icon you are using for "Saving/Loading" in cf.gov?

[himedlooff]

We haven't had a need for it yet.

[nataliafitzgerald]

The spinner with the arrow looks good. The speed feels a little fast to me. Do others feel that is the case? It is being used in blue on eRegs. @stephanieosan or @mebates - What color is it on Owning a Home?

[stephanieosan]

In Owning a Home we use the green spinner (same as the first example).

[Dnpizarro]

When it appears, typically what is the background like? Is the background color/graphics something we can control? I only ask because of contrast considerations for the color blind.

[stephanieosan]

It's on a white background for our case:

It's only on screen for a few seconds at a time, when data is loading.

[mebates]

At our last Design Manual Monthly Review, we discussed flipping this spinner (and even the minicon) so that it doesn't spin backwards, but forwards. @Dnpizarro, can you make that change in the minicon font?

@Scotchester and @ascott1 any thoughts on how this should be built for the web? We can provide the appropriate assets and add it to the Manual once it's flipped.

[mebates]

@Dnpizarro will update the minicon in the font this week.

FEWD implementation should be an animated gif. An alternative is a rotation of the image with CSS (which can scale to any size), but we would need the animated gif as a fallback.

This should be added to the design manual. We need to do some thinking about what category this could be under, 'Micro interactions'? Or 'Interactions'?

[stephanieosan]

Please check off when the following are done:

• [x] Minicon font updated
• [x] FEWD implementation of CSS with gif fallback (are we adding this into CF?)
• [ ] Add to the design manual

@Dnpizarro @Scotchester @himedlooff

[Dnpizarro]

Minicon font was updated with this correction.

[Dnpizarro]

I can make the update for the design manual, but its going to have to be in the next sprint.

[marteki]

The Before You Claim tool will be using this spinning indicator after the button is clicked to access data from the Social Security Administration.

~99.5% of the time it would only be visible for milliseconds, but there's the potential for a delay of several seconds. And friendly indicators make users happy. ^_^

If FEWD implementation of the new CSS with the GIF fallback is done before August 14th, the tool will include it. Otherwise, we'll use the current code (with its backwards spinning).

[mebates]

@marteki so are you looking for a FEWD to help with the CSS with GIF fallback? I'm assuming Chuck has his hands full.

@Scotchester @ascott1 @willbarton @jimmynotjim

[marteki]

Yes, FEWD help is needed for the CSS with GIF fallback implementation. Thanks for putting out the explicit call, Mollie!

[benguhin]

Make sure it spins clockwise! :)

[ascott1]

cf-icons contains the CSS animated version of the loading indicator (scroll down to the helper classes). Is the task here to create a gif fallback?

[ascott1]

Also, it's worth noting that the CSS animated version should cover roughly 96% of our users. The remaining 4% would see a non-animated spinner, so we may want to discuss if it is worth adding the complexity of the gif fallback.

For reference: http://caniuse.com/#feat=css-animation

[mebates]

@marteki @mistergone - did @ascott1 give you what you need, above?

[marteki]

We implemented and shipped the final release for Retirement using the cf-icons implementation. We only asked for the GIF fallback since it was called out as expected above.

And @benguhin, it didn't appear that the CF implementation had been updated with the flipped minicon font, unless we were mistaken. So it spins counter-clockwise. (And irritates me every time I see it, but maybe that's just me being irritable.)

[benguhin]

Yeah it should really spin clockwise - it currently communicates a backward/undo motion that we don't intend. That said, I'm assuming (perhaps wrongly) that it wouldn't take too long to flip it.

I'm cool with the 96% support (i.e., not adding a gif fallback) because the animation isn't necessary functionality for the majority of our usecases. Projects with significant data processing, like HMDA and Fair Lending, can choose to add a fallback if they think they need it (and they may want something showing percentage/status).

[stephanieosan]

Recommendation: We should add to the minicon page on the design manual that an animate version of this minicon exists in capital framework, for the purpose of loading/status.

[caheberer]

A google doc was created during the power session to add general content to the Minicons page and examples of how they are used on the buttons and alerts page. Ready for a dev!

[jimmynotjim]

490 is merged and live https://cfpb.github.io/design-manual/brand-guidelines/minicons.html#animation

Thanks @caheberer and @Scotchester