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?
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.
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.
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.