Optimise offers list loading

CHANGELOG.md

@@ -2,6 +2,7 @@ v1.1.0.0
 - Add login form
 - Optimise launch time
 - Fix presentation slider skip transition
+- Optimise offers list loading
 
 v1.0.8.3
 - Show main slide 

src/app/pages/offres-carte/offres-carte.page.html

@@ -13,22 +13,45 @@
   <ion-refresher (ionRefresh)="doRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
+  <div *ngIf="_TRIP.filtredProducts.length <= 0">
+    <ion-card class="skeleton" tappable no-margin margin-bottom>
+      <ion-skeleton-text class="img" animated></ion-skeleton-text>
+      <ion-card-header>
+        <ion-card-subtitle color="primary">
+          <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        </ion-card-subtitle>
+        <ion-card-title>
+          <ion-skeleton-text style="height: 20px" animated></ion-skeleton-text>
+        </ion-card-title>
+      </ion-card-header>
 
-  <!-- <ion-card class="top-card" no-margin>
-    <ion-card-content no-padding>
-      <ion-item lines="none">
-        <ion-label class="text-1x bold text-primary">Catégories</ion-label>
-        <ion-select cancelText="Fermer" class="text-primary" [(ngModel)]="terms" (ionChange)="onContextChange($event.id)">
-          <ion-select-option value="all">- Tout -</ion-select-option>
-          <ion-select-option *ngFor="let category of _TRIP.cats" [value]="category.id">
-            {{ category.label }}
-          </ion-select-option>
-        </ion-select>
-      </ion-item>
+      <ion-card-content no-padding padding-horizontal padding-bottom>
+        <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        <ion-skeleton-text animated></ion-skeleton-text>
+        <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        <ion-skeleton-text style="width: 50%" animated></ion-skeleton-text>
       </ion-card-content>
-  </ion-card> -->
-  <!--list of trips-->
-  <ion-card *ngFor="let trip of _TRIP.filtredProducts" (click)="viewDetail(trip.id)" tappable no-margin margin-bottom>
+    </ion-card>
+    <ion-card class="skeleton" tappable no-margin margin-bottom>
+      <ion-skeleton-text class="img" animated></ion-skeleton-text>
+      <ion-card-header>
+        <ion-card-subtitle color="primary">
+          <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        </ion-card-subtitle>
+        <ion-card-title>
+          <ion-skeleton-text style="height: 20px" animated></ion-skeleton-text>
+        </ion-card-title>
+      </ion-card-header>
+
+      <ion-card-content no-padding padding-horizontal padding-bottom>
+        <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        <ion-skeleton-text animated></ion-skeleton-text>
+        <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        <ion-skeleton-text style="width: 50%" animated></ion-skeleton-text>
+      </ion-card-content>
+    </ion-card>
+  </div>
+  <ion-card *ngFor="let trip of _TRIP.offersCardList" (click)="viewDetail(trip.id)" tappable no-margin margin-bottom>
     <div class="img-spinner-wrap ion-text-center">
       <ion-spinner name="dots" *ngIf="trip.hidden"></ion-spinner>
     </div>
@@ -69,4 +92,9 @@
     </ion-item>
   </ion-card>
 
+  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
+    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Chargement...">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
 </ion-content>
\ No newline at end of file

src/app/pages/offres-carte/offres-carte.page.scss

- .dashboard {
+.dashboard {
   ion-card {
+    ion-skeleton-text.img {
+      margin: 0 !important;
+      min-height: 160px;
+    }
     ion-badge {
       float: right;
       margin-top: -36px;
@@ -23,50 +27,51 @@
       }
     }
   }
-  }
-  .no-visibility {
+}
+.no-visibility {
   visibility: hidden;
-  }
-  .img-spinner-wrap {
+}
+.img-spinner-wrap {
   position: absolute;
   width: 100%;
   min-height: 10rem;
   padding-top: 4.5rem;
-  }
-  div[scrollx=true], div[scrolly=true] {
+}
+div[scrollx="true"],
+div[scrolly="true"] {
   position: relative;
   overflow: hidden;
 
   ::-webkit-scrollbar {
     display: none;
   }
-  }
+}
 
-  div[scrollx=true] {
+div[scrollx="true"] {
   overflow-x: auto;
-  }
+}
 
-  div[scrolly=true] {
+div[scrolly="true"] {
   overflow-y: auto;
-  }
+}
 
-  .app {
+.app {
   padding: 0;
   display: grid;
   grid-gap: 20px 0;
   // grid-template-columns: 20px 1fr 20px;
   align-content: start;
-  }
+}
 
-  .app > * {
+.app > * {
   grid-column: 2 / -2;
-  }
+}
 
-  .app > .full {
+.app > .full {
   grid-column: 1 / -1;
-  }
+}
 
-  .hs {
+.hs {
   display: grid;
   // grid-gap: calc(20px / 2);
   grid-template-columns: repeat(9999999, auto);
@@ -76,29 +81,28 @@
   scroll-snap-type: x proximity;
   // padding-bottom: calc(.75 * 20px);
   // margin-bottom: calc(-.25 * 20px);
-  }
-  
+}
 
-  /* Demo styles */
+/* Demo styles */
 
-  ion-content {
+ion-content {
   display: grid;
   place-items: center;
   // background: #456173;
-  }
+}
 
-  ul {
+ul {
   list-style: none;
   padding: 0;
-  }
+}
 
-  .app {
+.app {
   // background: #DBD0BC;
   overflow-y: scroll;
-  }
+}
 
-  .hs > li,
-  .item {
+.hs > li,
+.item {
   scroll-snap-align: center;
   // padding: calc(20px / 2 * 1.5);
   display: flex;
@@ -107,4 +111,4 @@
   align-items: center;
   background: #fff;
   border-radius: 8px;
-  }
\ No newline at end of file
+}

src/app/pages/offres-carte/offres-carte.page.ts

-import { Component, OnInit } from '@angular/core';
-import { ToastController } from '@ionic/angular';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ToastController, IonInfiniteScroll } from '@ionic/angular';
 import { AlloService } from '../../services/allo-service';
 import { TripService } from '../../services/trip-service';
 import { Storage } from '@ionic/storage';
@@ -11,6 +11,7 @@ import { Router } from '@angular/router';
   styleUrls: ['./offres-carte.page.scss'],
 })
 export class OffresCartePage implements OnInit {
+  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
 
   public toast: any;
 
@@ -21,7 +22,21 @@ export class OffresCartePage implements OnInit {
     private router: Router,
     private storage: Storage) { }
 
-  ngOnInit() {
+  ngOnInit() { }
+
+  loadData(event) {
+    setTimeout(() => {
+      ++this._TRIP.offersCardListPointer;
+      let loadedData = this._TRIP.filtredProducts.slice(this._TRIP.offersCardListPointer, this._TRIP.offersCardListPointer + 2);
+      if (loadedData) {
+        this._TRIP.offersCardListPointer = this._TRIP.offersCardListPointer + 1;
+        this._TRIP.offersCardList = this._TRIP.offersCardList.concat(loadedData);
+        console.log(loadedData, this._TRIP.offersCardList, this._TRIP.offersCardListPointer);
+        event.target.complete();
+      } else {
+        event.target.disabled = true;
+      }
+    }, 300);
   }
 
   setImgVisible(trip) {

src/app/services/trip-service.ts

@@ -9,6 +9,8 @@ import { AlloService } from './allo-service';
 export class TripService {
     public products: Array<any> = [];
     public filtredProducts: Array<any> = [];
+    public offersCardList: Array<any>;
+    public offersCardListPointer = 1;
     public brands: Array<any> = [];
     public cats: Array<any> = [];
     public request: any;
@@ -51,7 +53,10 @@ export class TripService {
 
             this.products = this._ALLO.shuffleArray(products);
             this.products.forEach((element) => { element.hidden = true; });
+            // setTimeout(() => {
             this.filtredProducts = this.products;
+            this.offersCardList = this.filtredProducts.slice(0, 2);
+            // }, 3000);
         }
         if (null !== data && 'object' === typeof data && data.hasOwnProperty('cats')) {
             var cats = this._ALLO.jsonToArray(data.cats);
@@ -103,5 +108,7 @@ export class TripService {
         this.filtredProducts = this.products.filter(item => {
             return item.categories_ids.includes(categoryId);
         });
+        this.offersCardList = this.filtredProducts.slice(0, 2);
+        this.offersCardListPointer = 1;
     }
 }