You don’t need to use WhileBusy for this in the first place. All you need is your button component to know when it’s in a “loading” state. That can be achieved easily by using ux:Property.
Just like you have your <string ux:Property="Text" /> in there, you can have a boolean property to handle the state:
<Panel ux:Class="DefaultButton" Margin="8" Label="Default Label" isLoading="false">
<string ux:Property="Label" />
<bool ux:Property="isLoading" />
<WhileTrue Value="{ReadProperty isLoading}">
<Change theLabel.Value="Loading..." />
</WhileTrue>
<Text ux:Name="theLabel" Value="{ReadProperty Label}" Color="#02BBC2" Alignment="Center" Margin="16" />
<Rectangle Color="#F2F2F2" CornerRadius="25" />
</Panel>
Inside WhileTrue you can describe how the button deviates from its not-busy rest state. For the purpose of this example, we only change the text of the button, but you could also put your Spin in there:
<WhileTrue Value="{ReadProperty isLoading}">
<Change theLabel.Value="Loading..." />
</WhileTrue>
When you’re done with the button template, you then need to figure out how to change that isLoading property to either true or false. Again, you don’t necessarily need to use a Busy behaviour (while you of course can). Here, we’re creating a JavaScript data context at the root of our application that holds a couple boolean Observables and functions to toggle them:
<JavaScript>
var Observable = require("FuseJS/Observable");
var isLoading1 = Observable(false);
var isLoading2 = Observable(false);
function firstButton() {
isLoading1.value = true;
setTimeout(function() {
isLoading1.value = false;
}, 3000);
}
function secondButton() {
isLoading2.value = true;
setTimeout(function() {
isLoading2.value = false;
}, 2400);
}
module.exports = {
isLoading1: isLoading1,
isLoading2: isLoading2,
firstButton: firstButton,
secondButton: secondButton
};
</JavaScript>
Now all you need to do is use your button template and make two instances of that button, and data-bind the isLoading property to the right variables:
<StackPanel Alignment="VerticalCenter">
<DefaultButton isLoading="{isLoading1}" Clicked="{firstButton}" />
<DefaultButton Label="My first button" isLoading="{isLoading2}" Clicked="{secondButton}" />
</StackPanel>
As for the animation part, please check out the answer given in this thread, it looks much smoother that way. Here’s the full code of this example for reference:
<App>
<Panel ux:Class="DefaultButton" Margin="8" Label="Default Label" isLoading="false">
<string ux:Property="Label" />
<bool ux:Property="isLoading" />
<WhileTrue Value="{ReadProperty isLoading}">
<Change theLabel.Value="Loading..." />
</WhileTrue>
<Text ux:Name="theLabel" Value="{ReadProperty Label}" Color="#02BBC2" Alignment="Center" Margin="16" />
<Rectangle Color="#F2F2F2" CornerRadius="25" />
</Panel>
<JavaScript>
var Observable = require("FuseJS/Observable");
var isLoading1 = Observable(false);
var isLoading2 = Observable(false);
function firstButton() {
isLoading1.value = true;
setTimeout(function() {
isLoading1.value = false;
}, 3000);
}
function secondButton() {
isLoading2.value = true;
setTimeout(function() {
isLoading2.value = false;
}, 2400);
}
module.exports = {
isLoading1: isLoading1,
isLoading2: isLoading2,
firstButton: firstButton,
secondButton: secondButton
};
</JavaScript>
<StackPanel Alignment="VerticalCenter">
<DefaultButton isLoading="{isLoading1}" Clicked="{firstButton}" />
<DefaultButton Label="My first button" isLoading="{isLoading2}" Clicked="{secondButton}" />
</StackPanel>
</App>
Hope this helps!
