Loading / waiting animation while waiting for the page to respond

Hello

I have a mobile app. On the screen I have a button that does some things but it takes a while to respond with the results. How can I create a loading / waiting widget that will be displaying on the screen while the user waits? Like the normal rotating circle that one always see when the computer is busy working on something? Currently my app is just not responding and the user don't know what is going on. Is there a standard mobile widget to use or a forge component?

Thanks!

Hi Vonnelize.

I don't think we have that pattern directly as you want, but you can easily take advantage of the React capabilities that P10 give us.

You can easily do something like this:

Then at the start of your action you'll assign that variable to True and after it ends, change it back to False:

Hope it helps.

Cheers,

GM

Thank you! I implemented as you suggested and it is perfect. Exactly what I wanted. Much appreciated.

Hi Vonnelize.

Nice to know that it was useful for your use case.

you just add a circle image o how you make the animation? sorry for ask in this thread.

Add the following to the Style Classes property  of the Icon:

SyntaxEditor Code Snippet

"icon fa-spin"

You can use my component:

https://www.outsystems.com/forge/component/3179/progress-spinner-mobile/

See detail tab for how-to.

This is how I resolved it:

1. Create  a new screen Action OnDoneNotifyAction

2.  Cut and Paste Everything from Your Preparation to your newly created OnDoneNotifyAction Action

3. Create a new isLoading variable (Boolean , with True Default Value)

4. Add a 'Loading'  placehlder (eg any icon or text that reflects something is Loading on your page) . I used a Loading .gif Image  below (Fig.2)

5. Add a "FakeNotifyWidget' to the 'Loading' Icon (Fig.1)

                                                                            Fig.1

6. Encapsulate the Loading' icon in an if Statement with the Loading Icon in True section and the rest of the form content in the False as shown below (Fig.2).

                                                                                Fig.2

7. Label the If Statement (eg ifIsLoading) Fig.3 so that you can refresh it  at the end of OnDoneNotifyAction

                                                                                  Fig.3

                                                          Fig.4

8. Finally Assign False to the isWait variable  and the Refresh the ifIsLoading (Fig.4)

9. Add a 'RunJavascript' to your now empty Preparation (Fig.5)

                                                                                  Fig.5

10. Finally, on Preparation Add the following Javascript Code to the Script (Fig.6): 

                                                                                         Fig.6

"OsNotifyWidget('" + OnDoneBlock.Id + "', 'randomtext');"

                                                           Fig.6

Try this it worked fine for me!