ember-loading

A simple Ember.js addon to capture and expose the loading state of your app,so you can show that to the user with e.g. a loading indicator.

But Ember has loading substatesso why do I even need it?

This is true, and works basically like this: when the user transitions from/foo to /bar, the DOM previously rendered through foo.hbs will be removed,the loading.hbs template renders while loading of the bar route is in progress,after which bar.hbs is rendered. That's fine, if it is what you need.

But another UX approach would be to keep foo.hbs rendered and add any kind ofloading indicator on top of it (e.g. an overlay over the existing content) orsomewhere else on the page while loading, and replace the rendered foo.hbswith bar.hbs only when loading has finished.

What else?

This addon helps you also to show the loading state for async processesbesides transitioning between routes, e.g. when you load or save data in acontroller/component.

How does it look like?

It is completely agnostic of any looks. It merely provides some basicinfrastructure to capture and expose the loading state. To actually renderyour loading indicator, you can use your own custom styled component or any ofthe existing loading indicator addons.

Compatibility

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v12 or above

Installation

ember install ember-loading

Usage

The addon's central piece is the loading service, which captures and exposesthe app's loading state.

Exposing the loading state

Using the service

The loading service exposes the following properties, which you can use torender your loading indicator in any way:

Using while-loading

Rather than explicitly injecting the loading service and using an {{#if}}block in your template, you can more conveniently use the while-loadingcomponent to wrap any content that should be shown only while loading:

{{#while-loading}}
  <LoadingIndicator/>
{{/while-loading}}

Capturing the loading state

Route transitions

The service will automatically recognize route transitions (i.e. async modelhooks) and set the service's loading state accordingly.

Custom actions

Whenever you kick off async processes that you want to show to the user, andwhich are not part of any of a route's model hooks, you can use the service'srun() function, which will call your own async function, and set theservices's loading properties accordingly.

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  loading: service(),

  actions: {
    save(model) {
      return this.loading.run(() => model.save());
    }
  }
})

The run() method has the following signature, similar to many of Ember'srunloop functions:

Decorator

If you use native classes and decorators, you can use the supplied @loading decorator to wrap any native method.

The decorator uses stage 1 syntax, meant to be used with TypeScript and/or ember-cli-babel V7.7.0+

import Controller from '@ember/controller';
import { action } from '@ember-decorators/object';
import { loading } from 'ember-loading';

export default class Foo extends Controller {

  @action
  @loading
  save(model) {
    return model.save();
  }
}

Configuration

The addon supports the following configuration options in your config/environment.js, under theember-loading key:

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.