Ion Spinner, Ion Refresher and more for boosting UI of Ionic Apps

When working with Ionic apps, we came up with many approaches about how to model our components, HTML files when we wanted to display any kind of recursive dynamic list of item/components. 


Today I would like to share how we model our HTML files for achieving pagination, refreshing the list, HTML spinner, etc.

For instance, if we have a certain list to display on a page, what we tend to do is that we use spinners for the UI to let the user know that there is something happening in the background while the screen doesn't show any response.

First - Spinner

<div class="spinner">
  <ion-spinner name="crescent"></ion-spinner>
</div>
This spinner lies at the top of the HTML to run as the very fast tag letting the user know that there is some loading happening in the background.
 
Second - Infinite Scroll
<ion-infinite-scroll (ionInfinite)="doInfinite($event.target)">
  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more categories...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>
This spinner lies at the end of the HTML, Even after the component/list we want to display.  Using Infinite scroll helps the user to know that there's loading happening while the rest of the list loads.  It also helps the API's/Services with UI to allow them time to load the remaining list. As you can see, this is very much ionic based, which gives a boost to your User Experience.
 
We make use of two more HTML components when displaying a list on any page which are Refresh component and a custom message component.
 
Third - IonRefresher
<ion-refresher slot="fixed" (ionRefresh)="reload($event)">
  <ion-refresher-content></ion-refresher-content>
</ion-refresher>
This component works as a modern day reload/refresh of the list. Pulling the list down, or swipe down gesture from the top of the list, triggers an event which goes on to reload the whole list. As you can see, this also is very much ionic based, which again gives a boost to your User Experience.
 
Lastly, Empty List Message
<ion-card text-center class="msg" *ngIf="msg.length > 0">
  <ion-text>
    {{msg}}
  </ion-text>
</ion-card>
 
This is a HTML component we use for displaying a message to user when the list is empty.

These practices are totally not to be implemented blindly.  We tend to use them as they work well for us and give us what we wish to achieve with our apps on the User Experience end of it.
 
I hope this was helpful.
 

Add comment