ngx-deferred-loader
v0.0.2
Published
Defer displaying loading placeholders until given period of time passes ⏱
Downloads
10
Maintainers
Readme
ngx-deferred-loader
Defer displaying loading placeholders until given period of time passes ⏱
What problem does it solve
It solves two very common problems of apps relying on async calls:
- blinking loading placeholders in case of quick responses from back-end
- lack of feedback in case of long running requests
Using ngx-loading-placeholder
you can defer displaying loaders for given period of time.
How to
Start by installing it to your project:
npm install ngx-deferred-loader
Import required module into your Angular app:
import { DeferredLoaderModule } from 'ngx-deferred-loader';
@NgModule({
...
imports: [
DeferredLoaderModule
]
...
})
export class AppModule { }
Apply *deferredLoader
directive to one of your loading placeholders, passing observable as an argument.
<p *deferredLoader="todoList$; waitMs:300">Please check your network connection...</p>
<ul>
<li *ngFor="let todo of todoList$ | async">
{{ todo.name }}
</li>
</ul>
In above case the loading placeholder will be displayed only if request takes more than 300ms, and will be hidden once observable is completed.
Configuration
*deferredLoader
- expects a parameter of typeObservable<any>
waitMs
(optional) - defines period of time after which the loading placeholder is displayed (default -200ms
)