Render into a template before attempting to resolve model


#1

So we’re seeing this thing happen where we attempt to load an items template that calls our api endpoint via ember-data in the model hook to get items, this will then loop over them in an each and render a component for each one.

I have been tasked with trying to speed this up because the perceived loading is really long on some devices. We’re sure that it’s not network that’s causing this but rather rendering. So I’m trying to find the best way to load into the items page possibly with a little loading animation in place of where the items will go when the model loads them, and then after this loading of the initial render happens, then go to the store to get items from the API and render the each component loop and replace the loading animation with the rendered items.

Any thoughts on how this should be done?


#2

You could think of changing the API to accept an array of items in the request or even side-loading responses, but if that is not possible, you might consider using the Ember.run loop to buffer and combine multiple changes. You could also re-inspect the design of the page to reduce thrashing when each element is rendered, e.g. perhaps causing too many changes to the DOM due to reformatting and/or reflowing stuff.


#3

Looks like most of my headaches are due to androids poor javascript performance which I had no idea about… unfortunate really.


#4

Yes that’s a frustrating problem I agree, not much one can really do until Android makes itself more accessible for dynamic frameworks like emberjs.


#5

@JordanRDesigns @kgish

I have noticed that mobile sites “built” for Android/iOS are almost always sluggish and laggy, even from big-name AAA companies. Nothing beats a native app. :stuck_out_tongue:


#6

Here is what I would do:

  • Make use of loading substates to show a spinner
  • Reduce the rendering workload - use https://runspired.github.io/smoke-and-mirrors/ or similar to only render what’s onscreen
  • Ember data can be slow for large amounts of data. Sometimes the only thing to do is use raw ajax instead. This depends on your data workflow and can be really annoying (ember data is really good at dealing with relationships and updating data etc) but might be the only choice in some situations