0

Hi I am new in programming and salesforce. I want to add spinner like "https://www.sfdcpoint.com/salesforce/lightning-spinner-in-lwc-lightning-web-component/" or just gif when my apex class is loading before click button. Can u help me ?

Apex class

public with sharing class StockMarketSharesWrapper {
    
    @AuraEnabled(cacheable=true)

    public static List<Wrapper> getAllCompanys(){
   
       

        // Define the list
        List<Wrapper> com = new List<Wrapper>(); 


        // Create account sObjects
        Wrapper w = new Wrapper();
        w.Ticker = 'U';
        w.Name = 'Unity Software Inc';
        Wrapper w1 = new Wrapper();
        w1.Ticker = 'UAL';
        w1.Name = 'United Airlines Holdings, Inc.' ;
        Wrapper w2 = new Wrapper();
        w2.Ticker ='DAOOU' ;
        w2.Name = 'Crypto 1 Acquisition Corp Unit';
        Wrapper w3 = new Wrapper();
        w3.Ticker = 'GLLIU';
        w3.Name ='Globalink Investment Inc. Unit' ;

        // Add accounts to the list
        com.add(w);
        com.add(w1);
        com.add(w2);
        com.add(w3);

        return com;
    }

    public class Wrapper{

@AuraEnabled
public String Name {get; set;}
@AuraEnabled
public String Ticker {get; set;}

} 

}

HTML

<template>

    <lightning-card variant="Narrow">
        <lightning-layout multiple-rows>
            <lightning-layout-item
                size="12"
                padding="around-small"
            >
            <div class="slds-grid">
            <!--Search place for text-->
                <div class="slds-col">
                    <lightning-input type="text"
                    value=''
                    ></lightning-input>
                </div>

                <div class="slds-var-m-top_large slds-var-p-right_medium">
                    <!--Search Button-->
                    <div class="slds-col">
                        <lightning-button 
                        label="Search"
                        onclick={showSearchResults}
                        variant="brand"></lightning-button>
                     </div>
                </div>
            </div>
                    
            
                    <lightning-datatable if:true={showCompanies} data={companys.data} columns={columns} key-field="Name"></lightning-datatable>
  
                                   
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>
Improve this question

1 Answer 1

Reset to default
1

You can do something like:

<lightning-spinner if:false={companys.data}>
</lightning-spinner>

This will show the standard Salesforce spinner until the data has loaded.

Eventually, you may have to handle error conditions, but this should be enough to get you started.

Improve this answer
2
  • 1
    lightning-datatable also has is-loading prop that the OP can use if the component only has datatable that depends on the spinner.
    – Sachin Hooda
    Dec 17, 2021 at 13:25
  • 1
    @SachinHooda True. I'd forgotten about that, but in this specific case, they are hiding the table until a button is pressed.
    – sfdcfox
    Dec 17, 2021 at 13:25

You must log in to answer this question.

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