Rethink loading icon speed API

[alanhogan]

Expectations

With a param named velocity, I would expect that it would default to 1 and that increasing the number to 2 would double the animation speed — in other words, I expect velocity to scale with frequency and to scale inversely with the period.

Reality

Bigger numbers make it go slower, and the default is 1.05.

Steps to Reproduce

Try it

Suggestions

Either:

• Change the math so that velocity is a multiple of the baseline speed, with a default of 1, where 0 would stop animation and 2 would be twice as fast; or
• Rename the variable. Since positive numbers slow the animation speed, negative numbers speed it up, and 0 has no effect, perhaps slowdown is a good name; or
• Just expose the cycle period directly, allowing consumers to set the time a full animation cycle takes to complete; or
• Remove this parameter and determine speed automatically based on the rendered size (as I understand to be the intended purpose). This option removes freedom but increases consistency.

I tend to think the first, third, and fourth options are the best as they involve the least guesswork and the most intuitive interface

Fine Print

• Component: loaders/dots
• Browsers: all

[aravindet]

This confused me as well. My vote is for options 3 and 1, in that order.

[ryanseddon]

@alanhogan @aravindet with the new spinner loader we expose the duration as a prop do you think that makes sense to apply that to the dots loader too?

[alanhogan]

Yes, that sounds exactly the same as option three above (duration = period).