Ionic skeleton loader


How to use a skeleton loader in Ionic, a cool way to show content is loading

17 Mar, 2021 · 3 min read

Skeleton loaders are super cool temporary placeholders for when your content is loading. Pretty sure you have seen them around on Facebook or Instagram.

Skeleton example

Today we’ll be looking at how to create this cool skeleton loader in Ionic.

First of all, we’ll start by using the Ionic starter app we built a while ago. You can find the starter on GitHub.

Adding a skeleton loader in Ionic

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

Open up the and add the following:

    <ion-skeleton-text animated style="width: 80px"></ion-skeleton-text>
    <ion-thumbnail slot="start">
        <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>

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 file to load some delayed data.

data = [];

constructor() {
	setTimeout(() => {{
		  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" />

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

How to solve App Tracking Transparency app store rejection in Ionic

4 Aug, 2021 · 4 min read

How to solve App Tracking Transparency app store rejection in Ionic

Ionic tab bar circle middle button

19 May, 2021 · 2 min read

Ionic tab bar circle middle button

Join 2099 devs and subscribe to my newsletter