Ionic skeleton loader

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

Adding a skeleton loader in Ionic

For our example, we'll be adding a skeleton loader on our tab1 page.

Open up the tab1.page.html and add the following:

<ion-list> <ion-list-header> <ion-skeleton-text animated style="width: 80px"></ion-skeleton-text> </ion-list-header> <ion-item> <ion-thumbnail slot="start"> <ion-skeleton-text></ion-skeleton-text> </ion-thumbnail> <ion-label> <h3> <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text> </h3> <p> <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text> </p> </ion-label> </ion-item> </ion-list>

This will be roughly the same format as our data, and you can see we render a full list with a header and one item in this case. It's up to you to create multiple items if needed. Furthermore, the skeletons will fill up the areas at hand. You can see we offset some by making them partial widths. They also come with the animated attribute. This will give them the remarkable moving aspect.

Now we need to stop showing this once our actual data is loaded.

Let's first head over to the tab1.page.ts file to load some delayed data.

data = []; constructor() { setTimeout(() => { this.data.push({ thumbnail: "URL", title: "Chris Bongers", description: "Some cool description about this person", }); }, 2000); }

This will load our data array with one person but be delayed by 2000 milliseconds.

Now we can modify our html file to reflect this data.

<ion-list *ngIf="data.length"> <ion-list-header> Famous people </ion-list-header> <ion-item *ngFor="let item of data"> <ion-thumbnail slot="start"> <img [src]="item.thumbnail" /> </ion-thumbnail> <ion-label> <h3>{{item.title}}</h3> <p>{{item.description}}</p> </ion-label> </ion-item> </ion-list>

And the last element we need to add is a ngIf on our skeleton list.

<ion-list *ngIf="!data.length"></ion-list>

This will make sure the skeleton doesn't show when the data is loaded.

All and all, we should now have this cool effect: Skeleton loader in Ionic

You can find the full demo code on the following GitHub repo.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Ionic skeleton loader

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Adding a skeleton loader in Ionic

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Adding a skeleton loader in Ionic

Thank you for reading, and let's connect!