DEV Community

negue
negue

Posted on

3

Lazy Loaded Components - #3 Extending the Loader

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?

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)