From 7ee0b528b02c6c89f88e2eb8e355ae465a9384c9 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Mar 2016 14:15:12 -0600
Subject: [PATCH] fix(infinitescroll): only show spinner when loading

Closes #5690
---
 .../infinite-scroll/infinite-scroll.scss      |  7 ++-
 .../infinite-scroll/test/short-list/index.ts  | 49 +++++++++++++++++++
 .../infinite-scroll/test/short-list/main.html | 18 +++++++
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 ionic/components/infinite-scroll/test/short-list/index.ts
 create mode 100644 ionic/components/infinite-scroll/test/short-list/main.html

diff --git a/ionic/components/infinite-scroll/infinite-scroll.scss b/ionic/components/infinite-scroll/infinite-scroll.scss
index 5b9245ea36b..75b4c634c55 100644
--- a/ionic/components/infinite-scroll/infinite-scroll.scss
+++ b/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;
 }
diff --git a/ionic/components/infinite-scroll/test/short-list/index.ts b/ionic/components/infinite-scroll/test/short-list/index.ts
new file mode 100644
index 00000000000..93f6e59a418
--- /dev/null
+++ b/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);
+
+  });
+}
diff --git a/ionic/components/infinite-scroll/test/short-list/main.html b/ionic/components/infinite-scroll/test/short-list/main.html
new file mode 100644
index 00000000000..f0af47b484d
--- /dev/null
+++ b/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>