feat(page): add skeletons to category and merchant list pages

duocun · May 2, 2020 · bdd211b · bdd211b
1 parent 74351ce
commit bdd211b
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 5 deletions.
diff --git a/src/app/pages/browse/category-list/category-list.component.html b/src/app/pages/browse/category-list/category-list.component.html
@@ -1,7 +1,14 @@
 <ion-row class="ion-padding">
-  <ion-list class="w-100">
+  <ion-list class="w-100" *ngIf="!loading; Else skeleton">
     <ion-item *ngFor="let category of categories" [routerLink]="['/tabs/browse/categories', category._id]">
       <h4 localValue [data]="category" key="name"></h4>
     </ion-item>
   </ion-list>
-</ion-row>
+</ion-row>
+<ng-template #skeleton>
+  <ion-list class="w-100" lines="none">
+    <ion-item *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
+      <ion-skeleton-text animated style="height: 36px"></ion-skeleton-text>
+    </ion-item>
+  </ion-list>
+</ng-template>
diff --git a/src/app/pages/browse/merchant-list/merchant-list.component.html b/src/app/pages/browse/merchant-list/merchant-list.component.html
@@ -1,4 +1,4 @@
-<ion-row class="ion-padding">
+<ion-row class="ion-padding" *ngIf="!loading; Else skeleton">
   <ion-col size="6" *ngFor="let merchant of merchants">
     <ion-card 
       class="card-merchant ion-no-margin"
@@ -18,4 +18,38 @@ <h3 localValue [data]="merchant" key="name"></h3>
       </ion-card-content>
     </ion-card>
   </ion-col>
-</ion-row>
+</ion-row>
+<ng-template #skeleton>
+  <ion-row class="ion-padding" *ngFor="let idx of [1,2,3]">
+    <ion-col size="6">
+      <ion-card class="ion-no-margin">
+        <ion-card-content>
+          <div class="card-content-merchant ion-margin-bottom">
+            <app-ion-image
+              src="assets/img/no-image.png"
+              alt="awesome product"
+            ></app-ion-image>
+          </div>
+          <ion-skeleton-text animated></ion-skeleton-text>
+          <ion-skeleton-text animated style="width:80%"></ion-skeleton-text>
+          <ion-skeleton-text animated style="width:60%"></ion-skeleton-text>
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+    <ion-col size="6">
+      <ion-card class="ion-no-margin">
+        <ion-card-content>
+          <div class="card-content-merchant ion-margin-bottom">
+            <app-ion-image
+              src="assets/img/no-image.png"
+              alt="awesome product"
+            ></app-ion-image>
+          </div>
+          <ion-skeleton-text animated></ion-skeleton-text>
+          <ion-skeleton-text animated style="width:80%"></ion-skeleton-text>
+          <ion-skeleton-text animated style="width:60%"></ion-skeleton-text>
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+  </ion-row>
+</ng-template>
diff --git a/src/app/pages/browse/merchant-list/merchant-list.component.ts b/src/app/pages/browse/merchant-list/merchant-list.component.ts
@@ -11,9 +11,12 @@ import { LocationService } from "src/app/services/location/location.service";
   styleUrls: ["./merchant-list.component.scss"]
 })
 export class MerchantListComponent implements OnInit {
+  loading: boolean;
   merchants: Array<MerchantInterface>;
   location: LocationInterface;
-  constructor(private locSvc: LocationService, private api: ApiService) {}
+  constructor(private locSvc: LocationService, private api: ApiService) {
+    this.loading = true;
+  }
 
   ngOnInit() {
     this.locSvc.getLocation().subscribe((location: LocationInterface) => {
@@ -52,6 +55,7 @@ export class MerchantListComponent implements OnInit {
         } else {
           this.merchants = merchants;
         }
+        this.loading = false;
       });
     });
   }