Fetching data off the main thread #2221
Unanswered
mark-looptimize
asked this question in
Q&A
Replies: 1 comment 1 reply
-
Unless you insist on using @lit-lab/task here is a regular solution. type TPerson = {
firstName: string,
lastName: string,
email: string
}
@customElement("boot-people")
class BootPeople extends BootBase {
@state() people:TPerson[] = []
override connectedCallback():void {
super.connectedCallback()
this.loadData()
}
async loadData():Promise<void> {
//Call this from the constructor. Don't call it from firstUpdate
//THIS IS VERY IMPORTANT TO GIVE a chance to the component to construct itself
await new Promise((r) => setTimeout(r, 0))
await new Promise((r) => setTimeout(r, 1000)) // This is just a delayer to simulate long running
const endpoint = "./people.json"
this.people = (await (await fetch(endpoint)).json()).result
}
override render():TemplateResult {return html`
<p>
${this.people.length ? html`<h2>Number of people ${this.people.length}</h2>` : html`
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
`}
</p>
`}
}
declare global { interface HTMLElementTagNameMap { "boot-people": BootPeople}} Here I use Bootstrap spinner defined in my base class BootBase. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I was having a bit of trouble understanding the best way to approach data fetching from a performance point of view with Lit.
I identified the following native and Lit primitives which sound like they could be helpful.
However, I am not sure I ended up in a good place and wanted to get some feedback on this. What I had in mind was:
That seems "technically correct" and also like a lot so I wanted to get some advice on this please :)
Beta Was this translation helpful? Give feedback.
All reactions