How to stop loading indicator

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?

       exports.startLoading = function() {
	    setTimeout(function() {
	}, 4000);
<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 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" />
		<Cycle Target="myTimeline.TargetProgress" Low="0" High="1" Frequency=".5" />
		<Spin Target="rotatingStroke" Frequency="1" />

	<Callback Handler="{startLoading}"/>
	<Busy ux:Name="isBusy" IsActive="true" />
		<Change loadingPanel.Opacity="1" Duration=".4" />
	<MyLoadingIndicator ux:Name="loadingPanel" Opacity="0" ThemeColor="#FF5061" />

Change the WhileFalse part with the following:

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

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

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() {
}, 3000);

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

It worked. Thanks