{"id":27957969,"url":"https://github.com/ngneat/loadoff","last_synced_at":"2025-05-07T18:15:37.987Z","repository":{"id":48200810,"uuid":"328200982","full_name":"ngneat/loadoff","owner":"ngneat","description":"🤯  When it comes to loaders, take a load off your mind...","archived":false,"fork":false,"pushed_at":"2022-02-23T16:35:19.000Z","size":1285,"stargazers_count":79,"open_issues_count":0,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-28T23:04:58.387Z","etag":null,"topics":["angular","async","asyncstate","loader","loading"],"latest_commit_sha":null,"homepage":"https://netbasal.com","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/ngneat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-09T16:46:36.000Z","updated_at":"2025-02-19T22:15:01.000Z","dependencies_parsed_at":"2022-09-04T11:42:32.968Z","dependency_job_id":null,"html_url":"https://github.com/ngneat/loadoff","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Floadoff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Floadoff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Floadoff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Floadoff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngneat","download_url":"https://codeload.github.com/ngneat/loadoff/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252298947,"owners_count":21725708,"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":["angular","async","asyncstate","loader","loading"],"created_at":"2025-05-07T18:15:37.470Z","updated_at":"2025-05-07T18:15:37.960Z","avatar_url":"https://github.com/ngneat.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n \u003cimg width=\"20%\" height=\"20%\" src=\"./logo.svg\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square\u0026labelColor=8f68d4)](https://github.com/ngneat/)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n\n\u003e When it comes to loaders, take a load off your mind...\n\n## Installation\n\n`npm install @ngneat/loadoff`\n\n## Create a Loader\n\nTo create a loader, call the `loadingFor` function and specify the loaders you want to create:\n\n```ts\nimport { loadingFor } from '@ngneat/loadoff';\n\n@Component({\n  template: `\n    \u003cbutton\u003e\n      Add\n      \u003cspinner *ngIf=\"loader.add.inProgress$ | async\"\u003e\u003c/spinner\u003e\n    \u003c/button\u003e\n    \n    \u003cbutton\u003e\n      Edit \n      \u003cspinner *ngIf=\"loader.edit.inProgress$ | async\"\u003e\u003c/spinner\u003e\n    \u003c/button\u003e\n    \n    \u003cbutton\u003e\n      Delete \n      \u003cspinner *ngIf=\"loader.delete.inProgress$ | async\"\u003e\u003c/spinner\u003e\n    \u003c/button\u003e\n  `\n})\nclass UsersTableComponent {\n  loader = loadingFor('add', 'edit', 'delete');\n\n  add() {\n    this.service.add().pipe(\n      this.loader.add.track()\n    ).subscribe();\n  }\n\n  edit() {\n    this.service.add().pipe(\n      this.loader.edit.track()\n    ).subscribe();\n  }\n\n  delete() {\n    this.service.add().pipe(\n      this.loader.delete.track()\n    ).subscribe();\n  }\n}\n```\n\n## Async State\n`AsyncState` provides a nice abstraction over `async` observables. You can use the `toAsyncState` operator to create an `AsyncState` instance which exposes a `loading`, `error`, and `res` state:\n\n```ts\nimport { AsyncState, toAsyncState } from '@ngneat/loadoff';\n\n@Component({\n  template: `\n    \u003cng-container *ngIf=\"users$ | async; let state\"\u003e\n      \u003cp *ngIf=\"state.loading\"\u003eLoading....\u003c/p\u003e\n      \u003cp *ngIf=\"state.error\"\u003eError\u003c/p\u003e\n      \u003cp *ngIf=\"state.res\"\u003e\n        {{ state.res | json }}\n      \u003c/p\u003e\n    \u003c/ng-container\u003e\n  `\n})\nclass UsersComponent {\n  users$: Observable\u003cAsyncState\u003cUsers\u003e\u003e;\n\n  ngOnInit() {\n    this.users$ = this.http.get\u003cUsers\u003e('/users').pipe(\n      toAsyncState()\n    );\n  }\n\n}\n\n```\n\nYou can also use the `*subscribe` [directive](https://github.com/ngneat/subscribe) instead of `*ngIf`.\n\n### `createAsyncState`\nYou can use the `createAsyncState` to manually create an instance of `AsyncState`:\n\n```ts\nimport { createAsyncState } from '@ngneat/loadoff';\n\n\nclass UsersComponent {\n  state = createAsyncState()\n}\n```\n\nThe initial state of `AsyncState` instance is:\n\n```ts\n{\n  error: undefined,\n  res: undefined,\n  loading: true,\n  complete: false,\n  success: false,\n};\n```\n\nYou can always override it by passing a partial object to the `createAsyncState` function:\n\n```ts\nimport { createAsyncState } from '@ngneat/loadoff';\n\n\nclass UsersComponent {\n  state = createAsyncState({ loading: false, complete: true, res: data })\n}\n```\n\n\n### `createSyncState`\nSometimes there could be a more complex situation when you want to return a `sync` state which means setting the `loading` to `false`\nand `complete` to `true`:\n\n```ts\nimport { createSyncState, toAsyncState } from '@ngneat/loadoff';\n\n\nclass UsersComponent {\n  ngOnInit() {\n    source$.pipe(\n      switchMap((condition) =\u003e {\n        if(condition) {\n          return of(createSyncState(data));\n        }\n\n        return inner$.pipe(toAsyncState())\n      })\n    )\n  }\n}\n```\n\n### Helper Functions\n\n```ts\nimport { isSuccess, hasError, isComplete, isLoading } from '@ngneat/loadoff';\n\nclass UsersComponent {\n  loading$ = combineLatest([asyncState, asyncState]).pipe(someLoading())\n\n  ngOnInit() {\n    this.http.get\u003cUsers\u003e('/users').pipe(\n      toAsyncState()\n    ).subscribe(res =\u003e {\n      if(isSuccess(res)) {}\n      if(hasError(res)) {}\n      if(isComplete(res)) {}\n      if(isLoading(res)) {}\n    })\n  }\n\n}\n```\n\n### `retainResponse`\nSometimes you want to retain the response while fetching a new value. This can be achieved with the `retainResponse` operator.\n\n```ts\nimport { toAsyncState, retainResponse } from '@ngneat/loadoff';\n\n@Component({\n  template: `\n    \u003cng-container *ngIf=\"users$ | async; let state\"\u003e\n      \u003cp *ngIf=\"state.loading\"\u003eLoading....\u003c/p\u003e\n      \u003cp *ngIf=\"state.error\"\u003eError\u003c/p\u003e\n      \u003cp *ngIf=\"state.res\"\u003e\n        {{ state.res | json }}\n      \u003c/p\u003e\n    \u003c/ng-container\u003e\n    \u003cbutton (click)='refresh$.next(true)'\u003eRefresh\u003c/button\u003e\n  `\n})\nclass UsersComponent {\n  users$: Observable\u003cAsyncState\u003cUsers\u003e\u003e;\n  refresh$ = new BehaviorSubject\u003cboolean\u003e(true);\n\n  ngOnInit() {\n    this.users$ = this.refresh$.pipe(\n      switchMap(() =\u003e this.http.get\u003cUsers\u003e('/users').pipe(toAsyncState())),\n      retainResponse()\n    );\n  }\n}\n```\n\nThe `retainResponse` operator accepts an optional `startWithValue` parameter which you can use to initialize the stream with an alternative `AsyncState` value.\n\n## Async Storage State\n`AsyncStore` provides the same functionality as `AsyncState`, with the added ability of being `writable`:\n\n```ts\nimport { AsyncState, createAsyncStore } from '@ngneat/loadoff';\n\n@Component({\n  template: `\n    \u003cng-container *ngIf=\"store.value$ | async; let state\"\u003e\n      \u003cp *ngIf=\"state.loading\"\u003eLoading....\u003c/p\u003e\n      \u003cp *ngIf=\"state.error\"\u003eError\u003c/p\u003e\n      \u003cp *ngIf=\"state.res\"\u003e\n        {{ state.res | json }}\n      \u003c/p\u003e\n    \u003c/ng-container\u003e\n    \n    \u003cbutton (click)=\"updateUsers()\"\u003eUpdate Users\u003c/button\u003e\n  `\n})\nclass UsersComponent {\n  store = createAsyncStore\u003cUsers\u003e();\n\n  ngOnInit() {\n    this.users$ = this.http.get\u003cUsers\u003e('/users').pipe(\n      this.store.track()\n    );\n  }\n  \n  updateUsers() {\n    this.store.update((users) =\u003e {\n      return [];\n    });\n  }\n\n}\n\n```\n\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.netbasal.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNetanel Basal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/@ngneat/loadoff/commits?author=NetanelBasal\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/@ngneat/loadoff/commits?author=NetanelBasal\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.\nContributions of any kind welcome!\n\n\u003cdiv\u003eIcons made by \u003ca href=\"http://www.freepik.com/\" title=\"Freepik\"\u003eFreepik\u003c/a\u003e from \u003ca href=\"https://www.flaticon.com/\" title=\"Flaticon\"\u003ewww.flaticon.com\u003c/a\u003e\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngneat%2Floadoff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngneat%2Floadoff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngneat%2Floadoff/lists"}