Strategy for using skeleton loading

[alexbjorlig]

My objective is to display skeleton loading for my web-component. This skeleton loading should be part of the DOM until the first data request from the web-component emits. To accomplish the last part I have added an "intialLoadDone" to my web-component, and it works ok. Something like this:

<!-- Some fancy skeleton loading build with tailwind-->
<div *ngIf="!isDoneLoading">
</div>


<web-cmpt [hidden]="!isDoneLoading" *axLazyElement="URL" (intialLoadDone)="doneLoading()">
</web-cmpt>

The problem is when there is an error loading the web cmpt. How can I make the component aware of this? Is it possible to get notified if there is a problem loading the web component? I hope my question makes sense 😊

[tomastrajan]

Hi @alexbjorlig !

There are 2 ways of doing this:

1. use built-in loading / error templates
2. use afterLoad hook

Loading / Error Template

<!-- Some fancy skeleton loading build with tailwind-->
<ng-template #loading>Loading...</ng-template>
<ng-template #error>Loading failed...</ng-template>

<mwc-button *axLazyElement="url; loadingTemplate: loading; errorTemplate: error; module: true"
            (click)="increment()">
  Increment
</mwc-button>

Hooks

https://angular-extensions.github.io/elements/#/examples/advanced#hooks (after load hook sets some state ? ) Would still go with templates

[alexbjorlig]

I don't understand how the inline templates would solve this?
Let's say that the web-component takes 1s to load, and the initial request made by the web component takes 5s. Loading templates don't seem to work for this case.

I need to look-into the hooks then. So my after load hook basically has to interact with some service, setting the state if the component is loaded with success or error - if I understand correct?

And thanks for a great library ☺️

[tomastrajan]

@alexbjorlig I think now I understand, in that case why not implement such skeleton loading as the internal implementation of the webcomponent itself ? eg Webcomponent is loaded, then shows its own sekeleton until the data is retrieved ?

[alexbjorlig]

Because then I need 2 skeleton loading templates?

As developers it makes sense that it's a 2 step rocket, but for a user it's "one" thing.

[tomastrajan]

Yeah, from dev perspective it makes sense that the webcomponent implements its own internal behavior, eg skeleton while loading data, which is something else as skeleton while loading UI component (even though they might look similar / same)

What do you think >?

[alexbjorlig]

I believe it should be one loading experience, not 2.

My best argument is that this is how I would design in 10/10 times, if not using web-components. And I don't think using web-components should alter that loading experience.

From the users perspective, there is loading and then data. No need to show 2 different loading indications. I will look into hooks 🤓

[gs-smuthyam]

@tomastrajan I agree with @alexbjorlig here since in a complex layout the user would ideally want a unique experience. We are using loadingTemplate: loading; errorTemplate: error; however, this can be provided in one of the default configuration.