Discover and read the best of Twitter Threads about #await
Most recents (5)
If you have a promise waiting for your data, {#await} block makes it easy to express your content in the loading π, resolved β
and rejected β state
So, let's talk about the {#await} block in @sveltejs
ππ§΅[THREAD]
So, let's talk about the {#await} block in @sveltejs
ππ§΅[THREAD]
Here's the general structure for the {#await} block
π {#await}
β {:then}
β {:catch}
π {/await}
[1/4]
π {#await}
β {:then}
β {:catch}
π {/await}
[1/4]
All the states are optional, so you could have
π no loading state
π no resolved state
π no rejected state
[2/4]
π no loading state
π no resolved state
π no rejected state
[2/4]
HTML doesn't have a way of expressing logic, like conditionals and loops. @sveltejs does.
Let's take a look at the 1st logic block in @sveltejs, π {#if} π
π𧡠[THREAD]
Let's take a look at the 1st logic block in @sveltejs, π {#if} π
π𧡠[THREAD]
If you prefer watching video, the following thread is a summary from my @YouTube video
I have a couple of new gotchas for people doing Svelte:
1. fade:out, or almost any "out" transition effect is death. Avoid at all costs.
2. {#await} on a promise is great, but if you update the promise it reloads the *entire* DOM at that point. Put it into a component.
1. fade:out, or almost any "out" transition effect is death. Avoid at all costs.
2. {#await} on a promise is great, but if you update the promise it reloads the *entire* DOM at that point. Put it into a component.
For #1, the demo involves this fade:out on the Spinner I use to show the video is loading. Seems harmless *until* you want to transition to an entire new page/component, say with svelte-spa-router.
You can see it happen here. I click the link for a related video, and you can see the current video has to "fade out", preventing that page from leaving the DOM, so it looks like both pages load at the same time. I'm at a point now where I don't use *any* out transitions.
Fetch a random Star Wars character data using @sveltejs demo
Features:
- Fits in a tweet
- Handles loading state using the #await block
- Renders a _beautifully_ formatted JSON
Code in the next tweet π
Features:
- Fits in a tweet
- Handles loading state using the #await block
- Renders a _beautifully_ formatted JSON
Code in the next tweet π
<script>
async function sw() {
let r = await fetch(
`swapi.co/api/people/${Math.ceil(Math.random() * 9) + 1}/`
);
return await r.json();
}
let p = sw();
</script>
{#await p}<p>Loading...</p>{:then char}<pre>{JSON.stringify(char, null, 2)}</pre>{/await}
async function sw() {
let r = await fetch(
`swapi.co/api/people/${Math.ceil(Math.random() * 9) + 1}/`
);
return await r.json();
}
let p = sw();
</script>
{#await p}<p>Loading...</p>{:then char}<pre>{JSON.stringify(char, null, 2)}</pre>{/await}
Get a Star Wars character with @sveltejs
<script>
function sw() {
return fetch(
`swapi.co/api/people/${Math.ceil(Math.random() * 10) + 1}`
).then(r => r.json());
}
</script>
{#await sw()}
<p>wait</p>
{:then c}
<p>{c.name}</p>
{/await}
<script>
function sw() {
return fetch(
`swapi.co/api/people/${Math.ceil(Math.random() * 10) + 1}`
).then(r => r.json());
}
</script>
{#await sw()}
<p>wait</p>
{:then c}
<p>{c.name}</p>
{/await}
If you'd like to learn how this works, I've just published an @eggheadio lesson which is FREE for the next couple of days! π
It's only 80 seconds and you can add "await block in @sveltejs" to your LinkedIn π₯³
egghead.io/lessons/svelteβ¦
It's only 80 seconds and you can add "await block in @sveltejs" to your LinkedIn π₯³
egghead.io/lessons/svelteβ¦
