How to stop loading indicator

How-to Discussions
#1

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>
#2

Change the WhileFalse part with the following:

<WhileBusy>
    <Change loadingPanel.Opacity="0.6" Duration=".4" />
</WhileBusy>
<LoadingIndicator ux:Name="loadingPanel" Opacity="0" ThemeColor="LoadingIndicator.Color" />

<!-- Your page -->
<Panel>
    <StackPanel Alignment="Center" >
        <Text Value="Page content" />
    </StackPanel>
    <Busy ux:Name="isBusy" IsActive="false" />
    <Activated Handler="{startLoading}"/>
</Panel>

If you are showing the loading indicator in a splash page and then want to go to an other page, let’s say Home, you should add to the Javascript part:

setTimeout(function() {
    isBusy.deactivate();
    router.goto("home");
}, 3000);

P.S. You should post this kind of questions in the How-to discussions forum. You will get better and fast answers.

#3

It worked. Thanks