> For the complete documentation index, see [llms.txt](https://exelord.gitbook.io/ember-await/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://exelord.gitbook.io/ember-await/guides/load-data-on-demand.md).

# Load data on demand

With Ember Await you can load your data on-demand (eg. on button click). To do it, we need to use [`@defer=`](https://github.com/Exelord/ember-await/tree/23b6843bfc298d86e322d79eb49d1a2151f6b504/docs/guides/api/arguments.md#defer) argument and call the promise using [`run`](https://github.com/Exelord/ember-await/tree/23b6843bfc298d86e322d79eb49d1a2151f6b504/docs/guides/api/yielded-properties.md#run) property.

**Remember! `this.fetchPosts` needs to return a function**

```
<Await @defer={{this.fetchPosts}} as |await|>
  <button {{on "click" await.run}}>Fetch posts</button>

  <await.Initial>
    No posts are loaded yet
  </await.Initial>

  <await.Fulfilled as |posts|>
    {{#each posts as |post|}}
      {{post.title}}
    {{/each}}
  </await.Fulfilled>
</Await>
```

This way, the content from `await.Initial` will be displayed until we click the `button` and posts will load.