Adding a loading Placeholder
With the current Loader, you can set a placeholder (e.g. a button to trigger the loading) and once it's loaded + created the content of the loader will be switched to the loaded component.
But what if the connection is slow? (Well .. thats the main goal of this Series π, to improve the initial load performance of an angular app π ) What if the Device is slow?
You could switch the placeholder content in your host-component (The component that uses the loader and sets the placeholder). But I kinda want to have a simpler way (less duplicate code for all of your host-components.)
So let's extend the loader with another <ng-content>
which only is visible during the load.
<ng-content *ngIf="componentLoading | async"
select="[isLoading]"></ng-content>
The select
here uses an element attribute (isLoading
) to select what has to be projected there.
@Output()
public componentLoading = new EventEmitter();
componentLoading
just emits true
/false
before and after the component is loading. Sadly I needed to add
private cd: ChangeDetectorRef
// and
this.cd.detectChanges();
otherwise the EventEmitter
/ or rather the template, didn't do anything.
Example how to use it in your hosting-component:
<helpers-dynamic-loader component="my-own">
This is a placeholder, while nothing is loading, could also have a button to trigger the load :)
<div isLoading>
<mat-progress-spinner mode="indeterminate" [diameter]="24"></mat-progress-spinner>
Component loading...
</div>
</helpers-dynamic-loader>
Click here for the latest version π
Current limitations:
The component-loader works fine for custom components, but the lazy-loaded-components can't use any other components. (This weirdly happens without an error).
to be (also) done...
- an example repo (started π)
- maybe export the loader as a bit component?
Top comments (0)