https://github.com/psmyrdek/ngx-deferred-loader

Avoid blinking loaders and give users feedback they need.
https://github.com/psmyrdek/ngx-deferred-loader

angular angular-http ngx observable ui

Last synced: about 2 months ago
JSON representation

Avoid blinking loaders and give users feedback they need.

• Host: GitHub
• URL: https://github.com/psmyrdek/ngx-deferred-loader
• Owner: psmyrdek
• License: mit
• Created: 2018-11-12T18:58:05.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-14T15:33:15.000Z (about 6 years ago)
• Last Synced: 2024-10-14T02:45:53.540Z (3 months ago)
• Topics: angular, angular-http, ngx, observable, ui
• Language: TypeScript
• Size: 415 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ngx-deferred-loader

Defer displaying loading placeholders until given period of time passes ⏱

![](docs/demo.gif)

[⚡️  DEMO on StackBlitz](https://stackblitz.com/edit/angular-grfyy1)

## 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:

```ts

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.

```html

Please check your network connection...



    


        {{ todo.name }}

    



```


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 type `Observable`

* `waitMs` (optional) - defines period of time after which the loading placeholder is displayed (default - `200ms`)