With Summer '21, we have the ability to create a Quick Action from a LWC.

The Quick Action doesn't use any of the HTML I can write in this component :

This may sound familiar if you recall writing JavaScript buttons in the past. One of the key differences between a screen action and a headless action is that you don’t need the HTML file in your LWC.

But I want to include a Spinner. I search for many ideas, creating another component which include just a spinner, but it seems really hard to open and close this component from the first one. I also didn't find any way to call a spinner by the JS without the HTML

There is my code :


import { LightningElement, api, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getAccountReport from '@salesforce/apex/WS_Account_Report.getAccountReport';

export default class GetAccountInfosQALWC extends LightningElement 
    @api recordId;
    @api invoke() {
        //Here i'm sending a Toast message as a workaround
        //But I want the spinner starting here
        this.showToastMessage(1,'We are getting your report in few seconds...');
        getAccountReport({accId : this.recordId })
            .then((result) => {
                //I want the spinner to stop here
                if(result != true && result != 'true'){
                    this.showToastMessage(2,'The report was successfully downloaded');
            .catch((error) => {

    showToastMessage(fromWho, mess, urlToast) {
        var variantToast;
        var titleToast;
        if(fromWho == 1){
            variantToast = 'info';
        else if(fromWho == 2){
            variantToast = 'success';
            titleToast = 'Success'
        const toastMessage = new ShowToastEvent({
            title: titleToast,
            message: mess,
            variant: variantToast,
            messageData: [
                    url: urlToast,
                    label: 'here'


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <targetConfig targets="lightning__RecordAction">

I already tested to put the spinner in the HTML, that's not working.

1 Answer 1


As you want to display a spinner, you will need to use the screen action instead of the headless action. Call the apex method(getAccountReport) as soon as the record id is passed down to the component. I don't know why the record id is not present in connectedCallack, so thought of an alternative way to call this from the setter method of the recordId.

Here is the code I tried.

// add your imports here.
export default class GetAccountInfosQALWC extends LightningElement {
    get recordId() {
        return this._recordId;
    set recordId(value) {
        this._recordId = value;

        if (this._recordId) {

    isLoading = true;

    callApex() {
        getAccountReport({ accId: this.recordId })
            .then((result) => {
                if (result != true && result != "true") {
                    this.showToastMessage(1, result);
                } else {
                        "The report was successfully downloaded"
                // call close quickAction
            .catch((error) => {
            .finally(() => {
                this.isLoading = false;

    closeAction() {
        this.dispatchEvent(new CloseActionScreenEvent());

Refer to this post: how to close quick action programmatically.

Note: Please note that you will need to remove the action from the page layout in order to change the type of action.

  • Hi Rahul, thank for the quick response, I want to be sure, if I have to change the type of action so I loose all the advantage of a Quick Action, and I don't want this. Also if I change the type, I can just do a regular LWC and have all I want, I already have one, but I really want to find a trick within a Quick Action, is it still possible ?
    – Yaac0
    Commented Jul 7, 2021 at 7:36
  • @Yaac0 Screen action is also the quick action. See here LWC Quick Action Commented Jul 7, 2021 at 8:02
  • It's not working, recordId in connectedCallback() always undefined
    – Yaac0
    Commented Jul 8, 2021 at 10:02
  • @Yaac0 did you change the action type to ScreenAction? Commented Jul 8, 2021 at 11:59
  • Yes I change it
    – Yaac0
    Commented Jul 8, 2021 at 12:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .