{"id":15541758,"url":"https://github.com/simonihmig/ember-loading","last_synced_at":"2025-04-13T12:27:02.682Z","repository":{"id":34142990,"uuid":"168510230","full_name":"simonihmig/ember-loading","owner":"simonihmig","description":"Primitives for handling loading state in Ember apps","archived":false,"fork":false,"pushed_at":"2025-03-28T02:59:08.000Z","size":3299,"stargazers_count":26,"open_issues_count":21,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T12:26:42.737Z","etag":null,"topics":["ember","ember-addon"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonihmig.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-31T10:55:43.000Z","updated_at":"2024-12-10T05:10:22.000Z","dependencies_parsed_at":"2024-06-18T22:44:32.507Z","dependency_job_id":"e788620b-dfdb-4b15-a823-8cb830aa7c2d","html_url":"https://github.com/simonihmig/ember-loading","commit_stats":null,"previous_names":["kaliber5/ember-loading"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fember-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fember-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fember-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fember-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonihmig","download_url":"https://codeload.github.com/simonihmig/ember-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248713369,"owners_count":21149675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon"],"created_at":"2024-10-02T12:19:32.492Z","updated_at":"2025-04-13T12:27:02.658Z","avatar_url":"https://github.com/simonihmig.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ember-loading\n==============================================================================\n\n![CI](https://github.com/kaliber5/ember-loading/workflows/CI/badge.svg)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-loading.svg)](https://emberobserver.com/addons/ember-loading)\n[![npm version](https://badge.fury.io/js/ember-loading.svg)](https://badge.fury.io/js/ember-loading)\n\nA simple Ember.js addon to capture and expose the loading state of your app,\nso you can show that to the user with e.g. a loading indicator.\n\n*But Ember has [loading substates](https://guides.emberjs.com/release/routing/loading-and-error-substates/)\nso why do I even need it?*\n\nThis is true, and works basically like this: when the user transitions from\n`/foo` to `/bar`, the DOM previously rendered through `foo.hbs` will be removed,\nthe `loading.hbs` template renders while loading of the `bar` route is in progress,\nafter which `bar.hbs` is rendered. That's fine, if it is what you need.\n\nBut another UX approach would be to keep `foo.hbs` rendered and add any kind of\nloading indicator on top of it (e.g. an overlay over the existing content) or\nsomewhere else on the page while loading, and replace the rendered `foo.hbs`\nwith `bar.hbs` only when loading has finished.\n\n*What else?*\n\nThis addon helps you also to show the loading state for async processes\nbesides transitioning between routes, e.g. when you load or save data in a\ncontroller/component.\n\n*How does it look like?*\n\nIt is completely agnostic of any looks. It merely provides some basic\ninfrastructure to capture and expose the loading state. To actually render\nyour loading indicator, you can use your own custom styled component or any of\nthe existing [loading indicator addons](https://emberobserver.com/categories/loading-indicators).\n\nCompatibility\n------------------------------------------------------------------------------\n\n* Ember.js v3.20 or above\n* Ember CLI v3.20 or above\n* Node.js v12 or above\n\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nember install ember-loading\n```\n\n\nUsage\n------------------------------------------------------------------------------\n\nThe addon's central piece is the `loading` service, which captures and exposes\nthe app's loading state.\n\n### Exposing the loading state\n\n#### Using the service\n\nThe `loading` service exposes the following properties, which you can use to\nrender your loading indicator in any way:\n\n| Property               | Description                                                           |\n|------------------------|-----------------------------------------------------------------------|\n| `isLoading: Boolean`   | Will be true if any captured async processes (see below) are pending. |\n| `showLoading: Boolean` | Will be true based on `isLoading`, but will take optional `preDelay` and `postDelay` into account, to optimize for the visual appearance. See [Configuration](#configuration) below. |\n\n#### Using `while-loading`\n\nRather than explicitly injecting the `loading` service and using an `{{#if}}`\nblock in your template, you can more conveniently use the `while-loading`\ncomponent to wrap any content that should be shown only while loading:\n\n```hbs\n{{#while-loading}}\n  \u003cLoadingIndicator/\u003e\n{{/while-loading}}\n```\n\n### Capturing the loading state\n\n#### Route transitions\n\nThe service will automatically recognize route transitions (i.e. async model\nhooks) and set the service's loading state accordingly.\n\n#### Custom actions\n\nWhenever you kick off async processes that you want to show to the user, and\nwhich are not part of any of a route's model hooks, you can use the service's\n`run()` function, which will call your own async function, and set the\nservices's loading properties accordingly.\n\n```js\nimport Controller from '@ember/controller';\nimport { inject as service } from '@ember/service';\n\nexport default Controller.extend({\n  loading: service(),\n\n  actions: {\n    save(model) {\n      return this.loading.run(() =\u003e model.save());\n    }\n  }\n})\n```\n\nThe `run()` method has the following signature, similar to many of Ember's\n[runloop](https://emberjs.com/api/ember/release/modules/@ember%2Frunloop) functions:\n\n| Arguments / Return value   | Description                                                          |\n|----------------------------|----------------------------------------------------------------------|\n| `target: any`              | optional target of method to call                                    |\n| `method: Function\\|string` | Async method to invoke. May be a function or a string. If you pass a string then it will be looked up on the passed target. |\n| `...args: any[]`           | Any additional arguments you wish to pass to the function.           |\n| returns                    | Promise that resolves with the return value of the invoked function. |\n\n#### Decorator\n\nIf you use native classes and decorators, you can use the supplied `@loading` decorator to wrap any native method.\n\n\u003e The decorator uses stage 1 syntax, meant to be used with TypeScript and/or `ember-cli-babel` V7.7.0+\n\n```js\nimport Controller from '@ember/controller';\nimport { action } from '@ember-decorators/object';\nimport { loading } from 'ember-loading';\n\nexport default class Foo extends Controller {\n\n  @action\n  @loading\n  save(model) {\n    return model.save();\n  }\n}\n```\n\n### Configuration\n\nThe addon supports the following configuration options in your `config/environment.js`, under the\n`ember-loading` key:\n\n| option                        | Default | Description                                                |\n|-------------------------------|---------|------------------------------------------------------------|\n| `preDelay: number`            | `0`     | Amount of milliseconds to delay the `showLoading` property (see [above](#using-the-service)) going from false to true. This allows you to suppress the loading indicator appearing for very short loading times. |\n| `postDelay: number`           | `0`     | Amount of milliseconds to delay the `showLoading` property (see [above](#using-the-service)) going from true to false. This can help you with aggregating multiple async processes happening in succession, to prevent flickering of the loading indicator. |\n| `watchTransitions: Boolean`   | `true`  | If `false`, async transitions do not affect the `isLoading` property. |\n\nContributing\n------------------------------------------------------------------------------\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonihmig%2Fember-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonihmig%2Fember-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonihmig%2Fember-loading/lists"}