Ionic 5 Full Starter App
  • Enappd Apps
  • Ionic 5 Full App
    • What is Ionic 5 Full App?
    • Template Features
    • Initial Setup
      • Environment Configuration
      • Credentials
    • Running the app
    • Deploying app as PWA
    • Building App on device
    • How to use this template?
      • Copy a module to another app
      • Shared Component & Modules
      • Map Service
    • Beginner Pack Features
      • Firebase
      • Layouts
      • Sidemenus
      • Login and Signups
      • Chat screens
      • Chat Lists
      • Video Playlists
      • Grids and Lists Layouts
    • Startup Pack Features
      • Wordpress
        • Wordpress JSON API Basics
        • Wordpress in Ionic 5 Full App
      • Translation - Multi-language
      • Using Custom Fonts
      • Infinite scroll
      • Content Loaders
      • Pull to refresh
      • List re-ordering
      • Date Pickers
    • Pro Pack Features
      • Phaser Game Framework
      • AdMob Integration
        • AdMob Introduction
        • Setting up Google Admob
        • Integration
      • Social Sharing
      • QR and Barcode Scanning
      • Google Places
      • Google Autocomplete
      • Social Logins
        • Google Login
        • Facebook Login
        • Twitter Login
      • Woo-commerce Integration
    • Removing a Page / Component
    • Removing a plugin
    • FAQs
    • Changelog
    • Troubleshoot
Powered by GitBook
On this page
  • Content Loader
  • Type 1 - ion-skeleton-text (recommended)
  • Type 2 - ngx-content-loader
  • API Example

Was this helpful?

  1. Ionic 5 Full App
  2. Startup Pack Features

Content Loaders

When the API response takes time, you want to show a content loader that matches your content UI, just like Facebook feed

PreviousInfinite scrollNextPull to refresh

Last updated 6 years ago

Was this helpful?

Content Loader

Also called Skeleton Text in ionic, it is used to show a loading data, but showing the tentative layout of the incoming structure. This looks more pleasing to the user, as user feels that the information is already in and will be displayed any second.

We have included two types of content loaders in the Full App, one using the Ionic's default ion-skeleton-text and another one using Angular's ngx-content-loader library

In both types of content loaders, you need to know beforehand what is the layout of your data going to be (which you will know any way because it is your app ! )

Type 1 - ion-skeleton-text (recommended)

It is located in src/app/pages/addons/content-loader2 .

The way to show the skeleton text while the data is loading uses a standard *ngIf logic - when data is loading , show the skeleton text. Once the data is loaded, hide the skeleton text and show actual data. But to the user, it appears like both were connected somehow because the layout seems very similar.

You can see in content-loader2.page.html, there are two div depending on a variable data

The skeleton text is just another div which has a gray-ish background, and the background displays a dynamic loader like animation. This gives the feel of a loading content.

E.g. The list header is loaded like this

<ion-list-header>
  <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-list-header>

You can assign CSS properties like width , height and border-radius to create different shaped for the loading data

Type 2 - ngx-content-loader

This is very similar to ion-skeleton-text except the fact that it is not included in ionic package. It is more flexible that ion-skeleton-text as you can define the origin points, width, height and two radii of the content loader SVG div.

In Full App it is located in src/app/pages/addons/content-loader .

As an example, see the following

<div class="loader">
  <content-loader>
    <svg:rect x="15" y="15" rx="1" ry="1" width="60" height="60" />
    <svg:rect x="90" y="25" rx="3" ry="3" width="260" height="15" />
    <svg:rect x="90" y="45" rx="3" ry="3" width="150" height="15" />
  </content-loader>
</div>

To install the library, you need to run

$ npm i @netbasal/ngx-content-loader --save

Import it in your module using

import { ContentLoaderModule } from '@netbasal/ngx-content-loader';

and include in the module imports as

@NgModule({
  ....,
  imports: [ContentLoaderModule, ...],
  ....
})

API Example

To illustrate the real usage, we have implemented an API call with 5000ms delay in the API usage segment of the content-loader page.

More details on this library are available in the

Github repository
Different types of content loaders
Content loader when API call is in progress
Content loader hides, actual data shows up