Check if findAll is still background reloading

Ember Data
1

In my app, I want to show a list of all items fetched via store.findAll('record'). This works nicely, and it shows local records immediately, and then does a background reload and populates the list with the new items.

I would now like to show a loading spinner while the fetching is not complete. However, isPending is set to true when the promise resolves, which is way before findAll has actually completed. Is there a way to check if a findAll call is complete? I tried to find something in the docs, but couldn’t find anything.

Simplified, this is what I want to do:

// my-component.js
allRecords: Ember.computed(function() {
  return this.get('store').findAll('record');
})

{{#if allRecords.isPending}}
  Still fetching data...
{{/if}}

{{#each allRecords as |record|}}
  {{record.name}}
{{/each}}
2

A couple of things:

  1. Generally a component shouldn’t fetch data itself, you should provide it with data

  2. Your plan seems odd, you want your user to see data then a spinner whilst the background refresh takes place then the data again? If you know you want to get fresh data each time then just use:

return this.get('store').findAll('record', {reload: true});

That will force Ember Data to fetch new data.

Hope that helps a bit!

1 Like
3

Well, my use case is a autocomplete select box. So it makes sense to show what is in the store immediately, while the full list is fetched in the background. But I still would like to show the user that data is still fetched - otherwise, they might assume that nothing exists for the search query, even if it might just not be loaded yet.