I want to display loading indicator while app is fetching data and then disappear after a few seconds as set in the JavaScript code. But the indicator would not disappear. Can someone show me what I am missing?
<JavaScript>
exports.startLoading = function() {
isBusy.activate();
setTimeout(function() {
isBusy.deactivate();
}, 4000);
};
</JavaScript>
<Panel ux:Class="MyLoadingIndicator" ThemeColor="#FF5061">
<float4 ux:Property="ThemeColor" />
<Circle ux:Name="rotatingStroke" Width="50" Height="50" StartAngleDegrees="-45" EndAngleDegrees="45">
<Stroke Width="2" Color="{ReadProperty ThemeColor}" />
</Circle>
<Circle Color="{ReadProperty ThemeColor}" Width="20" Height="20">
<Timeline ux:Name="myTimeline">
<Scale Factor=".5" Duration=".25" Easing="CircularOut" EasingBack="CircularIn" />
<Scale Factor="2" Duration=".25" Delay=".25" Easing="BounceOut" EasingBack="BounceIn" />
</Timeline>
</Circle>
<WhileFalse>
<Cycle Target="myTimeline.TargetProgress" Low="0" High="1" Frequency=".5" />
<Spin Target="rotatingStroke" Frequency="1" />
</WhileFalse>
</Panel>
<WhileFalse>
<Callback Handler="{startLoading}"/>
<Busy ux:Name="isBusy" IsActive="true" />
<WhileBusy>
<Change loadingPanel.Opacity="1" Duration=".4" />
</WhileBusy>
<MyLoadingIndicator ux:Name="loadingPanel" Opacity="0" ThemeColor="#FF5061" />
</WhileFalse>