You need to sign in to do that
Don't have an account?
Daniel Vu 6
Showing a loading indicator while calling Apex in Salesforce LWC
What is the best way to show a loading indicator while retrieving data from Apex in a Lightning Web Component?
I have this approach:
And this HTML
Now, this works but I'm using the LWC ESLint rules, and when I do this, I get an error/warning "no-api-reassignment" because I'm assigning the api properties in my connectedCallback.
https://github.com/salesforce/eslint-plugin-lwc/blob/master/docs/rules/no-api-reassignments.md
Which seems reasonable, though it very similar to the pattern that the Salesforce Lightning Spinner shows.
https://developer.salesforce.com/docs/component-library/bundle/lightning-spinner/documentation
So I'm just looking for advice on the best way to handle this or if I should just disable the ESLint rule. Other things to consider are how to test this stuff, the reactivity with the API decorator has made things pretty easy on my end but I don't want to continue if I'm not using the best approach.
I have this approach:
import { LightningElement, api } from "lwc"; import shouldShowCard from "@salesforce/apex/ApexClass.shouldShowCard"; /** * Card component that is conditionally shown based on Apex. */ export default class ConditionalCard extends LightningElement { @api recordId; @api isDone = false; @api shouldShow = false; connectedCallback() { shouldShowCard({ id: this.recordId }) .then(result => { this.shouldShow = result; }) .finally(() => { this.isDone = true; }); } }
And this HTML
<template> <template if:false={isDone}> <div>Loading...</div> </template> <template if:true={shouldShow> <div>Card</div> </template> </template>
Now, this works but I'm using the LWC ESLint rules, and when I do this, I get an error/warning "no-api-reassignment" because I'm assigning the api properties in my connectedCallback.
https://github.com/salesforce/eslint-plugin-lwc/blob/master/docs/rules/no-api-reassignments.md
Which seems reasonable, though it very similar to the pattern that the Salesforce Lightning Spinner shows.
https://developer.salesforce.com/docs/component-library/bundle/lightning-spinner/documentation
So I'm just looking for advice on the best way to handle this or if I should just disable the ESLint rule. Other things to consider are how to test this stuff, the reactivity with the API decorator has made things pretty easy on my end but I don't want to continue if I'm not using the best approach.
Thanks. I ended up not requiring a loading indicator, but I think using the wire attached to a method would allow it to happen. Not my exact code but an adaption that I think might work if people want to do something like this.
Tests would end up looking like thisThanks for the advice about wire, wasn't aware that wire would automatically call based on the reactive property like this.
All Answers
Thanks. I ended up not requiring a loading indicator, but I think using the wire attached to a method would allow it to happen. Not my exact code but an adaption that I think might work if people want to do something like this.
Tests would end up looking like thisThanks for the advice about wire, wasn't aware that wire would automatically call based on the reactive property like this.