https://github.com/ngneat/loadoff
🤯 When it comes to loaders, take a load off your mind...
https://github.com/ngneat/loadoff
angular async asyncstate loader loading
Last synced: 11 months ago
JSON representation
🤯 When it comes to loaders, take a load off your mind...
- Host: GitHub
- URL: https://github.com/ngneat/loadoff
- Owner: ngneat
- License: mit
- Created: 2021-01-09T16:46:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-23T16:35:19.000Z (about 4 years ago)
- Last Synced: 2025-04-28T23:04:58.387Z (11 months ago)
- Topics: angular, async, asyncstate, loader, loading
- Language: TypeScript
- Homepage: https://netbasal.com
- Size: 1.23 MB
- Stars: 79
- Watchers: 5
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[]()
[]()
[]()
[](https://github.com/prettier/prettier)
[](#contributors-)
[](https://github.com/ngneat/)
[]()
> When it comes to loaders, take a load off your mind...
## Installation
`npm install @ngneat/loadoff`
## Create a Loader
To create a loader, call the `loadingFor` function and specify the loaders you want to create:
```ts
import { loadingFor } from '@ngneat/loadoff';
@Component({
template: `
Add
Edit
Delete
`
})
class UsersTableComponent {
loader = loadingFor('add', 'edit', 'delete');
add() {
this.service.add().pipe(
this.loader.add.track()
).subscribe();
}
edit() {
this.service.add().pipe(
this.loader.edit.track()
).subscribe();
}
delete() {
this.service.add().pipe(
this.loader.delete.track()
).subscribe();
}
}
```
## Async State
`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:
```ts
import { AsyncState, toAsyncState } from '@ngneat/loadoff';
@Component({
template: `
Loading....
Error
{{ state.res | json }}
`
})
class UsersComponent {
users$: Observable>;
ngOnInit() {
this.users$ = this.http.get('/users').pipe(
toAsyncState()
);
}
}
```
You can also use the `*subscribe` [directive](https://github.com/ngneat/subscribe) instead of `*ngIf`.
### `createAsyncState`
You can use the `createAsyncState` to manually create an instance of `AsyncState`:
```ts
import { createAsyncState } from '@ngneat/loadoff';
class UsersComponent {
state = createAsyncState()
}
```
The initial state of `AsyncState` instance is:
```ts
{
error: undefined,
res: undefined,
loading: true,
complete: false,
success: false,
};
```
You can always override it by passing a partial object to the `createAsyncState` function:
```ts
import { createAsyncState } from '@ngneat/loadoff';
class UsersComponent {
state = createAsyncState({ loading: false, complete: true, res: data })
}
```
### `createSyncState`
Sometimes there could be a more complex situation when you want to return a `sync` state which means setting the `loading` to `false`
and `complete` to `true`:
```ts
import { createSyncState, toAsyncState } from '@ngneat/loadoff';
class UsersComponent {
ngOnInit() {
source$.pipe(
switchMap((condition) => {
if(condition) {
return of(createSyncState(data));
}
return inner$.pipe(toAsyncState())
})
)
}
}
```
### Helper Functions
```ts
import { isSuccess, hasError, isComplete, isLoading } from '@ngneat/loadoff';
class UsersComponent {
loading$ = combineLatest([asyncState, asyncState]).pipe(someLoading())
ngOnInit() {
this.http.get('/users').pipe(
toAsyncState()
).subscribe(res => {
if(isSuccess(res)) {}
if(hasError(res)) {}
if(isComplete(res)) {}
if(isLoading(res)) {}
})
}
}
```
### `retainResponse`
Sometimes you want to retain the response while fetching a new value. This can be achieved with the `retainResponse` operator.
```ts
import { toAsyncState, retainResponse } from '@ngneat/loadoff';
@Component({
template: `
Loading....
Error
{{ state.res | json }}
Refresh
`
})
class UsersComponent {
users$: Observable>;
refresh$ = new BehaviorSubject(true);
ngOnInit() {
this.users$ = this.refresh$.pipe(
switchMap(() => this.http.get('/users').pipe(toAsyncState())),
retainResponse()
);
}
}
```
The `retainResponse` operator accepts an optional `startWithValue` parameter which you can use to initialize the stream with an alternative `AsyncState` value.
## Async Storage State
`AsyncStore` provides the same functionality as `AsyncState`, with the added ability of being `writable`:
```ts
import { AsyncState, createAsyncStore } from '@ngneat/loadoff';
@Component({
template: `
Loading....
Error
{{ state.res | json }}
Update Users
`
})
class UsersComponent {
store = createAsyncStore();
ngOnInit() {
this.users$ = this.http.get('/users').pipe(
this.store.track()
);
}
updateUsers() {
this.store.update((users) => {
return [];
});
}
}
```
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.
Contributions of any kind welcome!
