fly-spinner

Source component

Elements with class fly-spinner

Target component

PlumaSpinner

Mapping

• replace <span class="fly-spinner"> with <PlumaSpinner>
• spinners with a "Loading" text next to them become <PlumaSpinner @shouldShowLoadingText={{true}} />
• spinners with a custom text become <PlumaSpinner @shouldShowLoadingText={{true}} @label="Please wait" />

Spinners in buttons

<PlumaButton> has a built-in loading state, which can be set with @isLoading (or which is automatically set when @onClick returns a promise).

When a fly-spinner is used inside a button, it should be made into an @isLoading on PlumaButton.

Examples

Source:

<div class="fly-spinner"></div>

Target:

<PlumaSpinner />

Source:

<div class="fly-spinner"></div> Loading…

Target:

<PlumaSpinner @shouldShowLoadingText={{true}} />