在Salesforce LWC中调用Apex时显示加载指示器

在Lightning Web组件中从Apex检索数据时，显示加载指示器的最佳方式是什么

我有以下方法：

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;
            });
    }
}

这个HTML

<template>
  <template if:false={isDone}>
    <div>Loading...</div>
  </template>
  <template if:true={shouldShow>
    <div>Card</div>
  </template>
</template>

加载。。。
卡片

现在，这是可行的，但我使用的是LWC ESLint规则，当我这样做时，会收到一个错误/警告“无api重新分配”，因为我在connectedCallback中分配api属性。

这似乎是合理的，尽管它与Salesforce Lightning Spinner显示的模式非常相似。

---

因此，我只是在寻找关于处理此问题的最佳方法的建议，或者我是否应该禁用ESLint规则。其他要考虑的事情是如何测试这些东西，API API的反应使我的事情变得很简单，但是如果我没有使用最好的方法，我不想继续。

如果这些参数是内部状态，你不需要<代码> @ API >代码>如果您不打算从父组件设置这些组件或将它们公开给系统管理员，以便他可以在Lightning App Builder中配置组件（例如）。您应该可以只使用

@track

——甚至不使用任何注释。对于简单变量，您不需要自Spring'20（）以来的

@track

；如果变量是数组或对象，则可能仍然需要它

这会让埃斯林特安静下来

我做的有点不同，我想个人偏好是从视觉力量

状态
和
渲染的
天开始的

<template>
    <template if:true={loaded}>
        <p>Content goes here</p>
    </template>
    <template if:false={loaded}>
        <lightning-spinner variant="brand" alternative-text="Loading"></lightning-spinner>
    </template>
</template>


import { LightningElement, api, wire, track } from 'lwc';
import someMethod from '@salesforce/apex/SomeClass.someMethod';

export default class StackExample extends LightningElement {
    @api recordId;
    @track data;
    loaded = false;

    @wire(someMethod, { i: '$recordId' }) wiredResponse({ error, data }) {
        if (data) {
            this.data = data;
            // some post-processing here
        } else if (error) {
            // show toast?
        }
        if(data || error){
            this.loaded = true;
        }
    }
}


内容在这里

从“lwc”导入{LightningElement，api，wire，track}；
从“@salesforce/apex/SomeClass.someMethod”导入someMethod；
导出默认类StackExample扩展LightningElement{
@api记录ID；
@跟踪数据；
加载=错误；
@wire（someMethod，{i:'$recordId'}）wiredResponse（{error，data}）{
如果（数据）{
这个数据=数据；
//这里有一些后期处理
}else if（错误）{
//敬酒？
}
如果（数据| |错误）{
this.loaded=true；
}
}
}

请记住，有些标记（如）具有内部微调器。在文档中搜索
isLoading
。因此，您甚至不需要html中的
if
s