{"id":21190789,"url":"https://github.com/jenssimon/promise-loading-spinner","last_synced_at":"2025-07-10T02:32:42.976Z","repository":{"id":34735176,"uuid":"177667405","full_name":"jenssimon/promise-loading-spinner","owner":"jenssimon","description":"Advanced handling of loaders/spinners based on one or multiple Promises.","archived":false,"fork":false,"pushed_at":"2024-10-29T08:33:47.000Z","size":784537,"stargazers_count":5,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-29T09:52:25.397Z","etag":null,"topics":["await-async","javascript","loader","loading-animation","loading-indicator","loading-spinner","promises","spinner","vanilla-javascript","vanillajs"],"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/jenssimon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-03-25T21:28:42.000Z","updated_at":"2024-10-22T15:32:53.000Z","dependencies_parsed_at":"2024-06-01T00:20:59.298Z","dependency_job_id":"0e5943aa-6183-4c59-9da2-7cf4a6efb94f","html_url":"https://github.com/jenssimon/promise-loading-spinner","commit_stats":{"total_commits":345,"total_committers":7,"mean_commits":"49.285714285714285","dds":0.3623188405797102,"last_synced_commit":"88c7241a0190f486ab0dc0aaf9da736b45ffa766"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fpromise-loading-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fpromise-loading-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fpromise-loading-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fpromise-loading-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jenssimon","download_url":"https://codeload.github.com/jenssimon/promise-loading-spinner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225615195,"owners_count":17496942,"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":["await-async","javascript","loader","loading-animation","loading-indicator","loading-spinner","promises","spinner","vanilla-javascript","vanillajs"],"created_at":"2024-11-20T19:01:00.310Z","updated_at":"2024-11-20T19:01:49.372Z","avatar_url":"https://github.com/jenssimon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM version][npm-image]][npm-url] [![Downloads][npm-downloads-image]][npm-url] [![star this repo][gh-stars-image]][gh-url] [![fork this repo][gh-forks-image]][gh-url] [![CI][gh-status-image]][gh-status-url] [![Coverage Status][coveralls-image]][coveralls-url]\n\n# promise-loading-spinner\n\n\u003e Advanced handling of loaders/spinners based on one or multiple Promises.\n\n## Why?\n\n- **Show a spinner using a promise** Spinner will disappear when promise is resolved\n- **No Spinner for short operations** Spinner won't show up for short operations so operation doesn't feel lazy\n- **Support of multiple promises** Spinner will disappear when the last unresolved promise is resolved\n- **Operations in a sequence** If there are multiple operations in a sequence the spinner will disappear when the last operation is finished\n\nSee this [Codepen](https://codepen.io/jenssimon/pen/NJmmJe).\n\n## Install\n\n```sh\n$ yarn add promise-loading-spinner\n```\n\n## Usage\n\nThis shows loading spinners based on promises.\n\n```javascript\nimport PromiseLoadingSpinner from 'promise-loading-spinner'\n\nconst loader = new PromiseLoadingSpinner({\n  // options\n})\n\n// ...\n\nconst myPromise = new Promise((resolve) =\u003e {\n  setTimeout(() =\u003e {\n    resolve('done')\n  }, 5000)\n})\n\nloader.loader(myPromise)\n```\n\nYou can also use a wrapper function for a function that returns a promise or uses `await`:\n\n```javascript\nconst myFunction = loader.wrapFunction(async (url) =\u003e {\n  const response = await fetch(url)\n  const result = await response.json()\n  return result\n})\n\nmyFunction(someUrl)\n```\n\nIt also exports a method decorator:\n\n```javascript\nconst loaderDecorator = loader.decorator.bind(loader)\n\nclass MyClass {\n  @loaderDecorator()\n  async foo() {\n    // ...\n  }\n}\n```\n\nAll ways to add a promise can also take a configuration object as an optional parameter.\n\nOption  | Description | Type\n--------|-------------|------\n`skipDelays` |  Skip all delays (`initDelay`, `delay`) | `boolean`\n\nExamples:\n\n```javascript\n\n// loader\nloader(promise, { skipDelays: true })\n\n// wrapFunction:\nwrapFunction(fnc, { skipDelays: true })\n\n// decorator:\nclass MyClass {\n  @loaderDecorator({ skipDelays: true })\n  async foo() {\n    // ...\n  }\n}\n```\n\n## Options\n\nOption  | Description | Type | Default\n--------|-------------|------|--------\n`delay` | Time (ms) until spinner will show up to handle short operations without a spinner | `Number` | `300`\n`closeDelay` | Time (ms) to wait until last promise is resolved to enable multiple operations in a sequence without a \"flickering\" spinner | `Number` | `10`\n`initDelay` | Delay (ms) after loader initialization to suppress spinners on page load | `Number` | `1000`\n`loaderElement` | the element which represents the spinner | `string` (selector) or `HTMLElement`| `js-page-loader`\n`classActive` | class name used to show the spinner | `string` | `is-active`\n\n## License\n\nMIT © 2023 [Jens Simon](https://github.com/jenssimon)\n\n[npm-url]: https://www.npmjs.com/package/promise-loading-spinner\n[npm-image]: https://badgen.net/npm/v/promise-loading-spinner\n[npm-downloads-image]: https://badgen.net/npm/dw/promise-loading-spinner\n\n[gh-url]: https://github.com/jenssimon/promise-loading-spinner\n[gh-stars-image]: https://badgen.net/github/stars/jenssimon/promise-loading-spinner\n[gh-forks-image]: https://badgen.net/github/forks/jenssimon/promise-loading-spinner\n[gh-status-image]: https://github.com/jenssimon/promise-loading-spinner/actions/workflows/ci.yml/badge.svg\n[gh-status-url]: https://github.com/jenssimon/promise-loading-spinner/actions/workflows/ci.yml\n\n[coveralls-url]: https://coveralls.io/github/jenssimon/promise-loading-spinner?branch=main\n[coveralls-image]: https://coveralls.io/repos/github/jenssimon/promise-loading-spinner/badge.svg?branch=main\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjenssimon%2Fpromise-loading-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjenssimon%2Fpromise-loading-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjenssimon%2Fpromise-loading-spinner/lists"}