implement loading indicator to list component

Author: Ihor Khomiak

app/components/cost/costs.component.ts

@@ -23,7 +23,12 @@ export class CostsComponent implements OnInit {
 
     ngOnInit(): void {
         const that = this;
-        this.costService.getCosts().then(result => that.list.refresh());
+
+        that.list.reloadList();
+        this.costService.getCosts().then(result => {
+            that.list.stopReloadList();
+            that.list.refresh();
+        });
     }
 
     add() {
@@ -60,7 +65,7 @@ export class CostsComponent implements OnInit {
     private pullToRefresh() {
         const that = this;
         this.costService.getCosts().then(result => {
-            that.list.stopReloadTree();
+            that.list.stopReloadList();
             that.list.refresh();
         });
     }

app/components/list/list.component.css

@@ -10,5 +10,11 @@
 }
 
 .main-container {
-    width: 100%; height: 100%;
+    width: 100%; 
+    height: 100%;
+}
+
+.indicator-container {
+    width: 100%; 
+    height: 100%;
 }

app/components/list/list.component.html

@@ -1,28 +1,37 @@
-<PullToRefresh (refresh)="refreshList($event)" 
-               class="main-container">
-    <ListView [items]="items"
-              #list
-              class="list-group">
-        <ng-template let-item="item">
-            <GridLayout row="0" 
-                        columns="*, 80, 100, 80">
-                <Label [nsRouterLink]="['/cost', item.id]" 
-                        [text]="item.quantity"
-                        class="list-group-item"
-                        col="0"></Label>
-                <Label [nsRouterLink]="['/cost', item.id]" 
-                        [text]="getDateValue(item)"
-                        class="list-group-item-date"
-                        col="1"></Label>             
-                <Label [nsRouterLink]="['/cost', item.id]" 
-                        [text]="item.type"
-                        class="tag-item"
-                        col="2"></Label>    
-                <Label [nsRouterLink]="['/cost', item.id]" 
-                        [text]="item.isFavorite === true ? 'Favorite' : 'Not Favorite'"
-                        class="list-group-item-favorite"
-                        col="3"></Label>              
-            </GridLayout>
-        </ng-template>
-    </ListView>
-</PullToRefresh>
+<AbsoluteLayout class="main-container">
+    <PullToRefresh (refresh)="reloadList($event)" 
+                   class="main-container">
+        <ListView [items]="items"
+                #list
+                class="list-group">
+            <ng-template let-item="item">
+                <GridLayout row="0" 
+                            columns="*, 80, 100, 80">
+                    <Label [nsRouterLink]="['/cost', item.id]" 
+                            [text]="item.quantity"
+                            class="list-group-item"
+                            col="0"></Label>
+                    <Label [nsRouterLink]="['/cost', item.id]" 
+                            [text]="getDateValue(item)"
+                            class="list-group-item-date"
+                            col="1"></Label>             
+                    <Label [nsRouterLink]="['/cost', item.id]" 
+                            [text]="item.type"
+                            class="tag-item"
+                            col="2"></Label>    
+                    <Label [nsRouterLink]="['/cost', item.id]" 
+                            [text]="item.isFavorite === true ? 'Favorite' : 'Not Favorite'"
+                            class="list-group-item-favorite"
+                            col="3"></Label>              
+                </GridLayout>
+            </ng-template>
+        </ListView>
+    </PullToRefresh>
+    <StackLayout verticalAlignment="center" 
+                 class="indicator-container">
+        <ActivityIndicator [busy]="isLoading" 
+                            [visibility]="isLoading ? 'visible' : 'collapse'" 
+                            horizontalAlignment="center" 
+                            verticalAlignment="center"></ActivityIndicator>
+    </StackLayout>
+</AbsoluteLayout>

app/components/list/list.component.ts

@@ -13,13 +13,23 @@ export class ListComponent {
     @ViewChild("list") list: ElementRef;
 
     private pullRefresh = {};
+    private isLoading: boolean = false;
 
     refresh() {
         this.list.nativeElement.refresh();
     }
 
-    stopReloadTree() {
+    reloadList(pullToRefreshArgs: any = null) {
+        if (pullToRefreshArgs) {
+            this.pullRefresh = pullToRefreshArgs.object;
+            this.pullToRefreshEvent.emit();
+        }
+        this.isLoading = true;
+    }
+
+    stopReloadList() {
         this.pullRefresh['refreshing'] = false;
+        this.isLoading = false;
     }
 
     private getDateValue(item) {
@@ -30,9 +40,4 @@ export class ListComponent {
         }
         return Utils.dateToYMD(itemDate);
     }
-
-    private refreshList(args: any) {
-        this.pullRefresh = args.object;
-        this.pullToRefreshEvent.emit();
-    }
 }