Up next in 10
Blog Post:
https://www.infallibletechie.com/2026/05/show-spinner-in-salesforce-lwc-headless-actions.html
Show More Show Less View Video Transcript
0:06
Hello everyone. In this video, we are
0:09
going to see how to show a spinner in
0:13
Salesforce lightning web component
0:15
headless action.
0:19
Whenever we make use of lightning
0:21
double_record action and if you use
0:25
action type as action then
0:30
it is an headless action.
0:33
We have screen action also so that the
0:37
lightning web component quick action
0:39
will uh show a screen in that we will be
0:43
able to add a spinner. But if you really
0:47
wanted to make use of headless action
0:50
that is the action type is action and
0:53
then if you want to show a progress
0:55
indicator
0:57
then you can make use of this video as a
1:00
reference.
1:04
The solution to this uh to show a
1:08
spinner whenever a headless action is in
1:12
progress, we can make use of lightning
1:15
model.
1:17
So here I created a spinner model
1:20
component. This is the lightning web
1:22
component. I'm making use of lightning
1:24
model. This is the header
1:30
and uh this is the body and this is the
1:32
footer.
1:35
And uh
1:37
in the JavaScript
1:39
I have uh made use of API so that I will
1:42
be able to pass message and as well as
1:46
work done. So here work done is a
1:48
promise
1:50
in the call back I am waiting for this
1:54
work done promise from the component
1:58
that is the lightning quick action
2:00
lightning web component. Once it is uh
2:04
resolved then it will set disable close
2:07
equal to false and then it will close
2:10
the
2:12
the lightning web component model
2:15
component
2:17
here is exposed should be false since it
2:21
is
2:23
since we are making use of lightning
2:24
model.
2:28
Okay. So this is my headless uh
2:32
quick action lightning web component.
2:35
Since it is headless action, the temp
2:38
the HTML is empty.
2:44
In the invoke method, I have declared a
2:46
close model as a variable and then uh
2:51
in the in order to pass the work done uh
2:55
promise for resolve
2:58
it should wait for this particular close
3:01
model.
3:08
I have imported spinner model from the
3:11
component spinner model. This is the
3:13
first lightning web component where we
3:15
have the spinner.
3:23
Now it will open the model. Next I'm
3:28
updating the account record
3:32
with the description test update plus
3:36
the current date and time in ISO string.
3:42
then it will update the record. Once the
3:46
record is updated successfully, it will
3:48
close the model and then it will dis
3:51
dispatch an event. Same thing happens
3:53
whenever an error occurs. It will close
3:56
the model and then it will dispatch an
3:59
event. So this close model
4:03
is here. So now it will pass this
4:08
promise as resolved since we are using
4:13
close model. So now it will go back
4:16
here.
4:18
Now the await is done.
4:22
Immediately it is setting disable close
4:24
equal to false and then it is closing
4:27
the pop-up model. Here I'm setting
4:30
disable equal to false because
4:34
I am controlling
4:45
whether it should be disabled or not
4:47
here. So when I set this disable close
4:49
equal to true then the users cannot
4:53
interfere and close the model by
4:56
default. If you wanted your users to
5:00
um close the model while the progress is
5:04
uh in progress, then you can set this
5:07
disable close as false instead of true.
5:14
For the target, I'm using lightning
5:15
double_record action and the action type
5:18
is action. So that it is a headless
5:21
quick action. Let's see a demo.
5:25
Let's clear this description.
5:31
Now if I click this account update,
5:35
it should open the model. It should show
5:37
a spinner. It should update the
5:39
description and then it should close the
5:43
spinner model lightning web component.
5:46
So I'm clicking the account update. I
5:49
was able to see a screen with the
5:51
progress uh indicator and then it
5:54
updated my description. So this is
5:57
successful scenario.
5:59
Let's see a failure scenario.
6:02
It should behave similarly for the
6:05
failure scenario also. So I created a
6:07
simple validation rule. Whenever the
6:09
description is updated,
6:12
it should uh throw an error.
6:16
So now if I do the same account update,
6:19
I was able to see the pop-up. It was
6:22
showing uh the
6:24
spinner and it also displayed a toast.
6:39
So this one was failure.
6:42
So it was able to handle failure
6:44
scenario also. Now if I click update it
6:47
should be able to update and then it
6:50
should be able to show a toast event. It
6:54
fired a toast event and then it is able
6:56
to display the toast.
7:03
Please check the video description. In
7:05
the video description I have shared my
7:07
blog post. From the blog post, you will
7:10
be able to get the sample code which we
7:11
referenced in this video for your
7:13
reference.
7:24
I hope it was helpful.
7:34
Thank you for watching.
#Internet Software
#Science