We do the fast majority of our data loading in our components. We also use Fastboot which, by default, only awaits for promises to resolve that are returned in the model hook.
Because all our data requests go through a central service, we're able to keep track how many requests are outstanding and then tell Fastboot to stop deferring and begin rendering the page. This isn't the most beautiful solution, but it's worked for us!
export default class ApplicationRoute extends Route { model(params, transition) { if (this.fastboot && this.fastboot.isFastBoot) { // Create a promise we'll resolve when we're done fetching data let promise = new Promise((resolve, reject) => { let poll = () => { later(() => { if (this.finder.inFlightRequests.length === 0 && this.query.inFlightQueriesCount === 0) { // If we have no more requests, wait until Ember has rendered and then resolve the promise scheduleOnce("afterRender", this, resolve) return } else { // Still more outstanding requests, so poll poll() } }, 50) } poll() }) // Pass the promise to fastboot so it will awai // until the promise resolves before rendering this.fastboot.deferRendering(promise) } } } 
Top comments (0)