title: Ionic4 Firebase Taking too long to load data
body: <p>I have created an ionic chat application with firebase realtime database. However, when I am trying to load all the users (around 150 for now) for "Add new user" page, it is taking too long to load all my data. Below are my files:</p>
  
  <p><strong>all-users.page.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-list lines="none" no-padding *ngIf="accounts &amp;&amp; (accounts.length &gt; 1)"&gt;
      &lt;ion-searchbar mode="ios" [(ngModel)]="searchUser" animated type="search"
          placeholder="Search"&gt;&lt;/ion-searchbar&gt;
      &lt;div *ngFor="let account of accounts | userFilter:searchUser"&gt;
          &lt;ion-item button=true detail=false lines="none" type="button" (click)="startMessage(account.key)"&gt;
          &lt;ion-avatar slot="start"&gt;
              &lt;img src="{{account.photoURL}}" onError="this.src='/assets/img/default-dp.png'"&gt;
          &lt;/ion-avatar&gt;
          &lt;ion-label&gt;
              &lt;h2&gt;{{account.fullName}}&lt;/h2&gt;
              &lt;p class="emailCustom"&gt;{{ account.email }}&lt;/p&gt;
          &lt;/ion-label&gt;
          &lt;/ion-item&gt;
      &lt;/div&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p><strong>all-users.page.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>ionViewDidEnter() {
      this.showLoading();
      this.accountsInfoResSub = this.getData.getUsers().snapshotChanges().subscribe((accountsInfoRes) =&gt; {
          let acc = accountsInfoRes.filter((c: any) =&gt; {
          if (c.key == null &amp;&amp; c.key == undefined &amp;&amp; c.payload.val() == null) return false;
          if (c.payload.val().fullName == '' || c.payload.val().fullName == ' ' || c.payload.val().fullName == undefined) return false;
          if (c.payload.val().publicVisibility == false) return false;
          return true;
          });
          this.accounts = acc.map((c: any) =&gt; {
          return { key: c.key, ...c.payload.val() }
          });
          console.log(this.accounts);
      });
  }
  </code></pre>
  
  <p><strong>user-filter.pipe.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export class UserFilterPipe implements PipeTransform {
    constructor(public afAuth: AngularFireAuth) {
    }
    transform(accounts: any, term?: any): any {
      if (!accounts) {
        return;
      } else if (!term) {
        console.log(this.afAuth.auth.currentUser.uid);
        return accounts.filter((account) =&gt; account.uid != this.afAuth.auth.currentUser.uid);
      } else {
        term = term.toLowerCase();
        return accounts.filter((account) =&gt; (account.uid != this.afAuth.auth.currentUser.uid) &amp;&amp; account.fullName.toLowerCase().indexOf(term) &gt; -1);
      }
    }
  }
  </code></pre>
  
  <p>Any idea what am I doing wrong here. I do get all my users listed but it is taking like 5-10 seconds to load 150 records. </p>