await once

[Rich-Harris]

Follow-up to #952 / https://github.com/sveltejs/svelte/issues/654#issuecomment-345490875. It would modify the behaviour of await blocks such that you'd only see the 'pending' state once — thereafter, whenever a new promise value was set, the old one would be preserved until the promise resolved. An additional argument would be passed to the then block, allowing the UI to indicate that the currently displayed data was out of date:

<!-- autocomplete suggestion list — we don't want to blow away
     the previous set of suggestions while we're waiting for
     the server to send us some new ones -->
{{#await once suggestions}}
  <span>loading...</span>
{{then value, pending}}
  <datalist id='suggestions' style='opacity: {{pending ? 0.5 : 1}}'>
    {{#each value as suggestion}}
      <option>{{suggestion}}</option>
    {{/each}}
  </datalist>

  {{#if pending}}
    <span>updating...</span>
  {{/if}}
{{catch err}}
  <span class='error'>could not get suggestions!</span>
{{/await}}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fvarano]

For anyone stumbling on this you can use a custom component instead of an await block, something like this REPL while we wait for updates, but in my opinion this should be the default behavior.

The await syntax makes writing reactive asynchronous UI really pleasant, but makes components flicker every time a variable they depend on has changed, forcing unwanted DOM changes and re-render cycles.

[vladshcherbin]

Much needed in svelte-kit with streaming data 🤞

[Rich-Harris]

Related: #8459

[Evertt]

@Rich-Harris if you are working on improving the {#await} block anyway, would you please consider this request as well? #10227