fix(infinitescroll): only show spinner when loading

Closes #5690

Author: adamdbradley

ionic/components/infinite-scroll/infinite-scroll.scss

@@ -26,6 +26,7 @@ ion-infinite-scroll-content {
 }
 
 .infinite-loading {
+  opacity: 0;
   width: 100%;
   margin: $infinite-scroll-loading-margin;
 }
@@ -39,6 +40,10 @@ ion-infinite-scroll-content {
 // Infinite Scroll Content States
 // --------------------------------------------------
 
-ion-infinite-scroll-content[state=disabled] .infinite-loading {
+ion-infinite-scroll-content[state=loading] .infinite-loading {
+  opacity: 1;
+}
+
+ion-infinite-scroll-content[state=disabled] {
   display: none;
 }

ionic/components/infinite-scroll/test/short-list/index.ts

@@ -0,0 +1,49 @@
+import {App, InfiniteScroll} from 'ionic-angular';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  items = [];
+
+  constructor() {
+    for (var i = 0; i < 5; i++) {
+      this.items.push( this.items.length );
+    }
+  }
+
+  doInfinite(infiniteScroll: InfiniteScroll) {
+    console.log('Begin async operation');
+
+    getAsyncData().then(newData => {
+      for (var i = 0; i < newData.length; i++) {
+        this.items.push( this.items.length );
+      }
+
+      console.log('Finished receiving data, async operation complete');
+      infiniteScroll.complete();
+
+      if (this.items.length > 90) {
+        infiniteScroll.enable(false);
+      }
+    });
+  }
+
+}
+
+function getAsyncData(): Promise<number[]> {
+  // async return mock data
+  return new Promise(resolve => {
+
+    setTimeout(() => {
+      let data = [];
+      for (var i = 0; i < 30; i++) {
+        data.push(i);
+      }
+
+      resolve(data);
+    }, 500);
+
+  });
+}

ionic/components/infinite-scroll/test/short-list/main.html

@@ -0,0 +1,18 @@
+<ion-toolbar><ion-title>Infinite Scroll</ion-title></ion-toolbar>
+
+<ion-content>
+
+  <ion-list>
+    <ion-item *ngFor="#item of items">
+      {{ item }}
+    </ion-item>
+  </ion-list>
+
+  <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
+    <ion-infinite-scroll-content
+      loadingSpinner="bubbles"
+      loadingText="Loading more data...">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
+</ion-content>