feat(data): show skeleton screens before data is loaded

Closes #4

src/app/modules/data/list/data-list.component.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component} from '@angular/core';
-import {AlertController, LoadingController} from '@ionic/angular';
+import {AlertController} from '@ionic/angular';
 import {SCThing} from '@openstapps/core';
 import {Subject} from 'rxjs';
 import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
@@ -25,8 +25,9 @@ import {DataProvider} from '../data.provider';
 })
 export class DataListComponent {
   dataProvider: DataProvider;
-  items: SCThing[] = [];
+  items: SCThing[];
   selectedItem: any;
+  loaded: boolean = false;
 
   size: number = 30;
   from: number = 0;
@@ -34,10 +35,7 @@ export class DataListComponent {
   query: string;
   queryChanged: Subject<string> = new Subject<string>();
 
-  loading: HTMLIonLoadingElement;
-
   constructor(
-    private loadingController: LoadingController,
     private alertController: AlertController,
     dataProvider: DataProvider,
     ) {
@@ -49,31 +47,19 @@ export class DataListComponent {
       .subscribe((model) => {
         this.from = 0;
         this.query = model;
-        this.items = [];
         this.fetchItems();
       });
-
     this.fetchItems();
   }
 
   private async fetchItems(): Promise<any> {
-    if (this.from === 0) {
-      this.loading = await this.loadingController.create();
-      await this.loading.present();
-    }
-
     return this.dataProvider.search({
       from: this.from,
       query: this.query,
       size: this.size,
     } as any).then((result) => {
-      result.data.forEach((item) => {
-        this.items.push(item);
-      });
-
-      if (this.from === 0) {
-        this.loading.dismiss();
-      }
+        this.items = result.data;
+        this.loaded = true;
     }, async (err) => {
       const alert: HTMLIonAlertElement = await this.alertController.create({
         buttons: ['Dismiss'],
@@ -82,8 +68,6 @@ export class DataListComponent {
       });
 
       await alert.present();
-
-      await this.loading.dismiss();
     });
   }
 

src/app/modules/data/list/data-list.html

@@ -12,10 +12,12 @@
 </ion-header>
 
 <ion-content>
-  <ion-list *ngFor="let item of items">
-      <stapps-data-list-item [item]="item"></stapps-data-list-item>
+  <ion-list *ngIf="items">
+    <stapps-data-list-item [item]="item" *ngFor="let item of items"></stapps-data-list-item>
+  </ion-list>
+  <ion-list *ngIf="!items">
+    <stapps-skeleton-list-item *ngFor="let skeleton of [1, 2, 3, 4, 5]"></stapps-skeleton-list-item>
   </ion-list>
-
   <ion-infinite-scroll (ionInfinite)="loadMore($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
   </ion-infinite-scroll>