## Full page skeleton loader
npm install @kverhoef/ngx-simple-skeleton-loaderThe full page skeleton loader is the simplest way to add skeleton loading to your application.
All that has to be done is implement the interceptor (see below for the code example). Once added it will watch for http calls.
While http calls are requesting the skeleton loader will cover the whole page and block ui-input.
``{ provide: HTTP_INTERCEPTORS, useClass: SkeletonLoaderHttpInterceptor, multi: true }`
Parts can be excluded for skeleton loading by adding the css class skip-skeleton-loader to the element.
``This part will not be covered by the skeleton loader
By default only text elements will be replaced by the skeleton loader placeholder. To add any other element, add the class add-skeleton-loader.
``This part will not be covered by the skeleton loader
`
// 1 Reference a html element for the skeleton loader placement
@ViewChild('skeletonLoaderContainer') skeletonLoaderContainer: ElementRef;
// 2 Add the SkeletonLoaderService
constructor(private skeletonLoaderService: SkeletonLoaderService, private httpClient: HttpClient)
// 3 Use the loadWithSkeleton function
someMethod() {
this.skeletonLoaderService.loadWithSkeleton(
httpClient.get('http://example.com'),
this.skeletonLoaderContainer
).subscribe();
}
``