ember-wait-for-render

Component + Mixin to prevent rendering content before route is fully rendered.

Information

Install in ember-cli application

In your application's directory:

ember install ember-wait-for-render

Usage

• Add the wait-for-render Mixin to your route.

// pods/index/route.js
import WaitForRenderMixin from 'ember-wait-for-render/mixins/wait-for-render';

export default Route.extend(WaitForRenderMixin, {
  // ...
});

• Use the component in your template.

{{!-- pods/index/template.hbs --}}

{{my-component}}

{{!-- this block will be rendered after my-component is fully drawed --}}
{{#wait-for-render}}
  {{my-delayed-component}}
{{/wait-for-render}}

for attribute

The for attribute can be used to render global components (in application.hbs) that doesn't has to be drawed before the user reaches certain page.

A typical example is an application menu that is hidden until the user has logged.

• Add the wait-for-render Mixin to your route.

• Use the component in your application template.

{{!-- pods/application/template.hbs --}}

{{my-login-stuff}}

{{!-- this block will be rendered after user reaches 'dashboard' route --}}
{{#wait-for-render for="dashboard"}}
  {{my-menu}}
{{/wait-for-render}}

Promises with for

The for attribute also accepts A+ promises (an object with a then method is required).

A little example:

{{!-- controller.js --}}
Ember.Controller.extend({
  // Set any promise into the view context
  promise: new Ember.RSVP.Promise().resolve()
});

{{!-- template.hbs --}}

{{#wait-for-render for=promise}}
  {{my-component}}
{{/wait-for-render}}

Integration with liquid-fire

• Reopen the wait-for-render component and change the layout.

import Ember from 'ember';
import WaitForRenderComponent from 'ember-wait-for-render/components/wait-for-render';

WaitForRenderComponent.reopen({

  layout: Ember.computed(function() {
    const layoutName = this.get('layoutName');
    const layout = this.templateForName(layoutName, 'layout');

    Ember.assert(`You specified the layoutName ${layoutName} for ${this}, but it did not exist.`, !layoutName || !!layout);

    return layout || this.get('defaultLayout');
  }),

  layoutName: 'wait-for-render'

});

• Write your custom template.

{{!-- wait-for-render/template.hbs --}}
{{#liquid-if _rendered class="wait-for-render"}}
  {{yield}}
{{/liquid-if}}

• Define the transition.

// app/transitions.js
this.transition(
  this.hasClass('wait-for-render'),
  this.toValue(true),
  this.use('crossFade', { duration: 400 }),
  this.reverse('crossFade', { duration: 400 })
);

Contribute

If you want to contribute to this addon, please read the CONTRIBUTING.md.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

See the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details