Ionic 4.1 Skeleton Text

Ionic 4.1 brings us some welcome UI changes, bug fixes and overall hype. Let’s jump right in and see this for ourselves, starting with the changes to Skeleton Text!

Skeleton text allows us to use placeholder UI that shows in place of actual content. It should be used whenever items are being loaded asynchronously. It can now be used in areas such as ion-avatar, ion-thumbnail as well as the ability to be animated with the animated attribute.

Skeleton UI

In order to produce this result, I did the following in Angular:

<ion-header>
  <ion-toolbar color="tertiary">
    <ion-title>Ionic 4.1: Skeleton Text</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-item>
        <ion-avatar slot="start">
          <ion-skeleton-text animated></ion-skeleton-text>
        </ion-avatar>
        <ion-label>
          <h2><ion-skeleton-text animated style="width: 100px;"></ion-skeleton-text></h2>
          <p><ion-skeleton-text animated style="width: 180px;"></ion-skeleton-text></p>
          <p><ion-skeleton-text animated style="width: 80px;"></ion-skeleton-text></p>
        </ion-label>
      </ion-item>
    </ion-card-header>
    <ion-card-content>
      <ion-skeleton-text animated></ion-skeleton-text>
      <ion-skeleton-text animated></ion-skeleton-text>
      <ion-skeleton-text animated></ion-skeleton-text>
      <ion-skeleton-text animated></ion-skeleton-text>
    </ion-card-content>
  </ion-card>
</ion-content>

Don’t forget that the ion-skeleton-text component isn’t limited to just Angular. Use it wherever fits best for your application.