Loading Spinner on Button Click

[AkshayManke]

Hello,

I have a PowerApp with multiple screens. On the Home screen i have given buttons to navigate to different screens. I want to show a spinner when someone clicks on a button so that the user can see the spinner during the waiting time to move from Home screen to other. I gone through several references and found that this can be achieved by the below

Step 1
Insert a Media > Add GIF in to it > Add a Variable <VarSpin> in to the 'Visible' property > 

Step 2
Set(VarSpin, true);
Navigate(FormScreen, ScreenTransition.None);
Set(VarTab,"Sub");
ResetForm(FormName);
Set(VarSpin, false)

But it is somehow not working and i am not seeing the spinner while transitioning from Home screen to other. Can anyone please help that what is missing in the formula?

Regards,

[WarrenBelz]

Hi @AkshayManke ,

Firstly Power Apps has a built-in LoadingSpinner on the Screen properties on which you can set the property to either Data or Controls (Data is best) and you can also set the colour. This works very well in most circumstances.

The reason you are not seeing the spinner on your current code I suspect is that the code is loading too fast to display it.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[WarrenBelz]

Hi @AkshayManke ,

Just checking if you got the result you were looking for on this thread. Happy to help further if not.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[v-yutliu-msft · Accepted solution]

Hi @AkshayManke ,

Do you want an image shows when loading page?

The reason why you can not see it is that the loading time is too short for you to notice the variable changing value.

I suggest you use a Timer control to increase the loading time and then display the image when the Timer runs.

I've made a similar test for your reference:

1)Insert a Media > Add GIF in to it 

insert an image control, set its Image to this gif picture

set the image control's Visible:

VarSpin

2)insert a Timer on the Home screen

insert a navigate button

set the navigate button's OnSelect:

Set(vartimer,true);Set(VarSpin, true)

set the Timer's Start:

vartimer

set the Timer's Duration:

3000

//loading time is 3s

set the Timer's OnTimeEnd:

Navigate(FormScreen, ScreenTransition.None);
Set(VarTab,"Sub");
ResetForm(FormName);
Set(VarSpin, false)

set the Timer's Visible:

false

Then when you click the navigate button, the image will be visible, the timer will start.

When 3s passes, you will navigate to formscreen, the image will be invisible.

Best regards,

[AkshayManke]

Many Thanks @v-yutliu-msft  & @WarrenBelz ,

@v-yutliu-msft 's solution is working as expected. Accepting as solution. Thanks again!.

[MH3]

HI @v-yutliu-msft ,

Your Solution works fine, when I click on the button 1st time, I see the loading image and navigated to the next screen, and then I again come back to the home screen and then again press the button, the timer is stuck and the image is showing permenantly?

what to fix in this?? 

[WarrenBelz]

@MH3 ,

I wish you success with spinners on timers - I have never been able to get them reliable. It was the reason I did not mention them.

[MH3]

Oh Yes @WarrenBelz ,

but actually I want to show the user the loading gif, in order to the data loaded on other screen.

any fix for this?

[WarrenBelz]

@MH3 ,

Maybe if you take them to the other screen - you can hide everything and add a loading spinner, then navigate back at the end of the loading code. I use a GIF spinner quite a bit, but start and end it at both ends of loading code.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[MH3]

Done @WarrenBelz  

Thanks For the Help!