Svelte: How to display something only when a promise is not pending?

Question

In Svelte's tutorial on await blocks and promises, they show how to display a certain text when a promise is awaiting/resolved/rejected.

But how can you show an element when something is not loading? I.e. when the promise has either been resolved or rejected (without duplicating the button in both {:then} and {:catch}, of course)

What I'm looking to do is the following:

{#await promise}
{:then number}
    <MyElement />
{:catch error}
    <MyElement />
{/await}

But without duplicating <MyElement />.

score 3 · Answer 1 · answered Nov 13 '19 at 13:10

According to the Promises API (and this question, there is no off-the-shelf way to know if a promise has resolved)

You can create a flag that updates when the promise is resolved like

// in <script>
let resolved;
promise.then(x => resolved = true).catch(x => resolved = true);

and in the end, do

{#if resolved}
 <MyElement />
{/if}

Svelte: How to display something only when a promise is not pending?

1 Answers1