Get recordId in LWC Quick Action And Redirect on App Page 

recordId in LWC Quick action are not directly availabe in connected callback. Generally, We need the record id on load of the lightning page to do something. To overcome this challenge, these two alternative would be helpful:-

Create a lwc component name myLWC and use it in Quick Action 

myLWC .js

import { LightningElement, api, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';

import { CloseActionScreenEvent } from 'lightning/actions';
export default class RecordLwcButton extends LightningElement {
    wireRecordId; //used to hold the record id fetched from pagereference
    currectRecordId; //use to hold the record id fetched from getter and setter

    @wire(CurrentPageReference)
    getStateParameters(currentPageReference) {
        if (currentPageReference) {
            console.log('Inside wire currentPageReference ', currentPageReference);
            this.wireRecordId = currentPageReference.state.recordId;
        }
    }

    @api set recordId(value) {
        this.currectRecordId = value;
        console.log('Inside set currectRecordId ',this.currectRecordId);
    }

    get recordId() {
        return this.currectRecordId;
    }

    connectedCallback() {
        //not available in connected callback
        console.log('currectRecordId ', this.currectRecordId);
        // available in connected callback
        console.log('wireRecordId ', this.wireRecordId);

//After that redirect on app page 

        if (this.wireRecordId) {
            console.log('Record ID:', this.wireRecordId);
            const url = `/lightning/n/ContactActionApp?c__recordId=${this.wireRecordId}`;
            window.open(url, '_blank');
           this.dispatchEvent(new CloseActionScreenEvent()); // Close the quick action modal
        }
    }
}

Create a Lightning App Page for your LWC
Go to Lightning App Builder.
Create a new App Page
Drop your LWC component onto the page.
Save and activate it.
Let’s say the app page URL looks like:

/lightning/n/ContactActionApp

Update your LWC to read the recordId from the URL

Use the CurrentPageReference in your LWC JS to get the recordId from the query string.
import { LightningElement, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';

export default class ContactActionComponent extends LightningElement {
    recordId;

    @wire(CurrentPageReference)
    getStateParameters(currentPageReference) {
        if (currentPageReference) {
            this.recordId = currentPageReference.state?.c__recordId;
        }
    }
}

Spinner in lightning component salesforce

 

Spinners are CSS loading indicators that should be shown when retrieving data or performing any action which take time. lightning:spinner displays an animated spinner image to indicate that a request is loading.

What is aura:waiting and aura:doneWaiting?

aura:waiting : This event is automatically fired when a server side apex action is added using $A.enqueueAction(). This event is always fired before aura:doneWaiting. It is handled by a client-side (javaScript)controller. One component can have only one tag to handle this event.

1. This event indicates that the app is waiting for the response to a server request.
2. This event is fired before aura:doneWaiting.
3. This event is automatically fired when a server-side action is added using $A.enqueueAction().
4. The aura:waiting event is handled by a client-side controller.
5. A component can have only one <aura:handler> tag to handle this event.

aura:doneWaiting : This event is automatically fired when all server response(apex)  complete. aura:doneWaiting indicate that the lightning component is done waiting for server response. This event is always fired after aura:waiting. It is handled by a client-side (javaScript)controller. One component can have only one tag to handle this event.

1. This event indicates that the app is done waiting for the response to a server request.
2. This event is fired after aura:waiting.
3. This event is automatically fired if no more response from the server is expected.
4. This event is also handled by a client-side controller.

Lightning Loading Spinner Example :

<aura:component controller="AccountController">

    <!--Aura handler with waiting and donewaiting events declare-->

<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>

    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>

     

   

     

    <!--loading spinner start-->

    <div class="exampleHolder">

        <lightning:spinner aura:id="mySpinner" class="slds-hide"/>

    </div>

    <!-- Loading spinner end-->     

     

    <!-- Rest of the code goes here -->

   

</aura:component>




lightning spinner javascript controller

({

        

    // This function automatic called by aura:waiting event 

    showSpinner: function(component, event, helper) {

        // remove slds-hide class from mySpinner

        $A.util.removeClass(component.find("mySpinner"), "slds-hide");

    },

     

    // This function automatic called by aura:doneWaiting event

    hideSpinner : function(component,event,helper){

        // add slds-hide class to mySpinner   

        $A.util.addClass(component.find("mySpinner"), "slds-hide");

    }

})