Stop spin from reverting icon back to original position

How-to Discussions
1

I am using spin to spin a loading icon, but when isBusy === false, the spin icon is sometimes reverted back to the original position, and that looks weird. Is it possible to have the spin class to just leave the icon at the position it stops spinning?

<RefreshButton Clicked="{getData}" ux:Name="reload">
	    	<Reload Alignment="Center" />
	    	<WhileTrue Value="{isBusy}">
	    		<Scale Factor="0.8" Duration="0.1" Easing="QuadraticInOut"/>
	    		<Spin Target="reload" Frequency="2"/>
	    	</WhileTrue>
	    </RefreshButton>
2

The results of these animators are always temporary, so there is no way to get it to stick in the temporary state. It will always revert to the rest state when {isBusy} is false again. This happens for both the Scale and the Spin.

One possibility, if the backwards spinning is an issue, is to create a timeline that spins one revolution, and call PulseForward on it repeatedly (via another repeating timeline). The WhileTrue could then turn on/off that timeline instead. That would at least prevent the image from spinning backwards, though it’d still complete it’s one revolution always. This is a bit complicated to setup.

You may wish to also look into the Busy API to our built-in busy system.