# Content Loaders

## 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. 

![Different types of content loaders](/files/-LaQ9YVNvYWf42xetYXd)

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

{% hint style="info" %}
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 ! )
{% endhint %}

### 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.&#x20;

In Full App it is located in `src/app/pages/addons/content-loader` .&#x20;

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&#x20;

```
$ 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, ...],
  ....
})
```

More details on this library are available in the [Github repository](https://github.com/NetanelBasal/ngx-content-loader)

### 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.

![Content loader when API call is in progress](/files/-Lakh2Xb2YtDtasrxfKa)

![Content loader hides, actual data shows up](/files/-Lakh6hqtYoz0gBUtJyE)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://enappd-apps.gitbook.io/apps/ionic-4-full-app/startup-features/content-loaders.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.