Enhance Ionic — 🦴 Adding Bones To Your Ionic 5 App 💀
You may be thinking when you clicked on this post “he’s going to talk about structuring your Ionic app and what to think about when building it” or “I bet he’s going to speak about adding an API about your skeletal system or nutrition.”
Well, I am sad to say, not this time. Today, I want to show you a neat way of removing the issue of having the user seeing nothing and having to wait on information to load to know the app hasn’t broken. The way we do this is by using a component called Skeleton Text.
Now, what is Skeleton Text? Skeleton Text allows you to add essentially GIFs to your pages to show where the text will go, while it loads. I’m sure you’ve seen it used in many widely used apps such as Facebook, Instagram, or even LinkedIn (shown below).
Why Would We Want This?
According to Kissmetrics, 47% of visitors expect the website that they are on to load in less than 2 seconds. 40% of visitors will leave the website if it takes more than 3 seconds to load the page.
How does Skeleton text improve this metric? It gives the user the sense that they are in control. Below, you will find the 3 important time limits that occur during the delay between a visitors action and the app’s response:
- ⌛ 0.1 second: If the app responds within 0.1 seconds of the users’ action, it gives the appearance of direct manipulation. This means it makes the visitor think that the result was generated by their action and not by the computer.
- ⌛ 1 second: If the app responds within 1 second, the visitor will notice and feel that the app is generating the results instead of they. However, they will focus more on their train of thought.
- ⌛ 10 seconds: Once you get to this point the visitor no longer feels in control, and their mind will start to wander onto other things they need to do that day. Which, more often than not, means leaving the website.
So if we integrate a visual representation that shows the visitor “Hey, we noticed you clicked that are working on getting your results.” Instead of the visitor wondering if the app has frozen or crashed.
Other Options
As far as other options go, I’m pretty sure we’ve all seen these different ways of saying “loading.”
Circular Patterns
Circular Patterns are the most commonly used type of loading screens used in today’s applications. This provides a cover for the app to show while in the background, it populates all the data.
Custom Patterns
With the increase of computational ability and skill, we have begun to see custom loading screens. Now, what are custom loading screens? They are Loading Patterns that the company or organization go out of their way to make a GIF that relates to their mission and not only gives the site a little bit better branding but also keeps the user interested at a much higher rate.
For example, take this one that could be used to add to a website about space travel:
Or this one that could be used for a fishing website:
None At All
Out of all the options listed, this would probably be the WORST option, but quickest to implement. I would only do this if I was building an app that was only for me and I knew how long I should expect it to be loading wise.
Let’s Get This Party Started! 🎉
To get started adding “bones” to your app, you first need an app that has a component that will need to load with some pending data. For this part, I have already set up a project for you to use to get an understanding of how to use Skeleton Text! To get that project, click the link below:
In this project, to test the Skeleton Text functionality, we will be using a timed delay of displaying the actual data. If you’re doing this without the Github project, create a new page in Ionic and add all the code below to the project. Or if you already have a project that needs Skeleton Text, add only what you need.
new.page.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-new',
templateUrl: './new.page.html',
styleUrls: ['./new.page.scss'],
})
export class HomePage{ constructor() { }
}
new.page.html
<ion-header>
<ion-toolbar>
<ion-title>Skeleton Text</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>This is the base template for the new page you will create if you’re going into this project by yourself.
Adding the Juicy Bits 🍑
Now we start getting into the meaty portion of the project. Taking all of the subjects we’ve spoken about in the previous part of this article and putting them to use.
The first thing to add is div elements to hold the buttons that will be used to switch back and forth, and the containers for the loaded data and skeleton display.
<ion-header>
<ion-toolbar>
<ion-title>Skeleton Text</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="buttons">
</div>
<div id="skeleton">
</div>
<div id="info">
</div>
</ion-content>Next, we need to add the actual guts of each of these elements:
<ion-header>
<ion-toolbar>
<ion-title>Skeleton Text</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="buttons">
<ion-button *ngIf="isLoaded" expand="block" class="ion-margin" (click)="update()">Skeleton</ion-button>
<ion-button *ngIf="!isLoaded" expand="block" class="ion-margin" (click)="update()">Info</ion-button>
</div>
<div id="skeleton">
<ion-item *ngFor="let article of articles">
<ion-label>
<h1>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h1>
<p class="ion-padding-vertical">
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<ion-skeleton-text style="width: 100%; height: 300px"></ion-skeleton-text>
</ion-label>
</ion-item>
</div>
<div id="info">
<div *ngFor="let article of articles" class="ion-padding">
<h1>{{ article.name }}</h1>
<p *ngIf="article.desc">{{ article.desc }}</p>
<img src="{{ article.image}}" *ngIf="article.image" alt="">
</div>
</div>
</ion-content>As you can see, this HTML will be dynamically generated and will only be shown whether or not the button has been pressed.
The only thing to add now is the logic to this page:
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
public isLoaded = false;
public articles = [{
name: 'Article 1',
desc: 'This is the article description',
},{
name: 'Article 2',
desc: 'This is ANOTHER article description but with an image',
image: 'https://static.wikia.nocookie.net/youtubepoop/images/c/c1/SmittyWerbenjagermanjensen.jpg/revision/latest?cb=20150728025502'
},{
name: 'Article 3',
image: 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F28.media.tumblr.com%2Ftumblr_lqxh7iK9mM1qeolyto1_500.jpg&f=1&nofb=1'
}];
constructor() {}
public update() {
this.isLoaded = !this.isLoaded;
}
}Deploy!
You are now ready to deploy this app! You can run it on your local machine by typing the following into the terminal:
ionic serveIf you would like to deploy your app to a website, click here to have a step-by-step walkthrough of adding your app to Heroku. If you would like to deploy your app to the app store, click here for Android, and click here for the iOS App Store.
If you would like to see what the app would look like on different mobile devices, simply run:
ionic serve --labThis command will pull up the same locally hosted test site but display not only what it looks like on iOS and Android, but also for Windows mobile devices. For more information on this command, click here!
🎉 Completion 🎉
We have finally completed the app! Hurray! If you’ve read the article but don’t want to have re-read it just to create it yourself, click here! In that repo, I have added all the code I typed while making this article. I challenge you to download the code, run it, and see if you can find the Easter Eggs without looking directly into the code!
Video for this article coming soon!
If you would like to view my previously written articles or connect with me, visit my website by clicking here!
