How to show Splash Animation while processing script

ashaseeb · October 30, 2024, 8:41pm

I am writing Javascript on my custom form and calling an AI-API, which takes a few seconds to response. During that waiting time, the user cannot recognize that something is processing in the background so to improve user experience, I want to show splash animation which normally appears in standard ERPNext. I would appreciate it if someone could guide me on two points below:

How can I show splash animation? what will be the code in myCustomForm.js file
How can I show splash animation + my custom message for the user such as “Please wait, AI is reviewing your request…”?

Expecting Splash Screen:

ejaaz · October 31, 2024, 5:03am

You can use freeze and freeze_message to freeze the screen and show a custom message.

ashaseeb · October 31, 2024, 5:38pm

Appreciate @ejaaz for the reply it works well freezing the screen,

however, to show the GIF I added HTML in the code and not sure if is this the right approach, If someone here can guide me is there any way around achieving ERPNext default splash screen instead of adding HTML in the message?

so far here is the code and result in my case.

freeze:true,
freeze_message:__('<span style="display: block;text-align:center;">'
                                 +'<img src="https://cdn.pixabay.com/animation/2023/08/21/13/31/13-31-04-403_512.gif" alt="Processing" style="width:100px; height:100px;"></br>'
                                 +'Please Wait...</br>AI is Reviewing the request</span>'),

Please refer to the below updates and results.

ejaaz · November 1, 2024, 6:02am

Wow, That’s nice @ashaseeb