Render Delay

[Seaborg]

Short description of the problem:

There's a big delay before ionic displays basic list from Firebase using Pipe

What behavior are you expecting?

big render delay, you can see in the inspector that data are pulled from Firebase but not rendered, problem occurs only on mobile, it works fine on the browser. When I added pull to refresh I still get the delay but after tap on the screen data are getting rendered. Size of the list makes no significant difference in speed.

Steps to reproduce:

1. add

page.js constructor() { Firebase.enableLogging(true); this.firebaseUrl = "https://something.firebaseio.com/messages"; }

2. page.html

<ion-list no-lines>
      <div ion-item *ngFor="#message of firebaseUrl | firebaseevent:'child_added'">
          <ion-icon name="text" item-left></ion-icon>
          <div item-left>
            <strong>{{message.user}}</strong>: {{message.message}}
          </div>
      </div>
  </ion-list>

1. add pipe firebasepipe.js code from below
2. change application mode to production
3. ionic serve
4. open inspector in chrome
5. toggle device mode to mobile
6. choose Samsung S3

firebasepipe.js

import {ChangeDetectorRef, Component, Inject, Pipe, PipeTransform, View, WrappedValue, bind, bootstrap} from 'angular2/core';

export enum ALLOWED_FIREBASE_EVENTS {value, child_added};

@Pipe({
  name: 'firebaseevent',
  pure: false
})
export class FirebaseEventPipe implements PipeTransform {
  private _cdRef:ChangeDetectorRef;
  private _fbRef:Firebase;
  private _latestValue:any;
  private _latestReturnedValue:any;
  constructor(@Inject(ChangeDetectorRef) cdRef:ChangeDetectorRef) {
    this._cdRef = cdRef;
  }
  transform(value:string, args:string[]):any {
    if (!this._fbRef) {
      this._fbRef = new Firebase(value);
      let event = this._getEventFromArgs(args);
      if (ALLOWED_FIREBASE_EVENTS[event] === ALLOWED_FIREBASE_EVENTS.child_added) {
        this._fbRef.limitToLast(50).on(event, snapshot => {
          // Wait to create array until value exists
          if (!this._latestValue) this._latestValue = [];
        this._latestValue.push(snapshot.val());

        this._cdRef.markForCheck();
      });
      } else {
        this._fbRef.limitToLast(50).on(event, snapshot => {
          this._latestValue = snapshot.val();
        this._cdRef.markForCheck();
      });
      }

      return null;
    }

    if (this._latestValue === this._latestReturnedValue) {
      return this._latestValue;
    } else {
      this._latestReturnedValue = this._latestValue;
      return (<any>WrappedValue).wrap(this._latestReturnedValue);
    }

    return null;
  }
  onDestroy() {
    if (this._fbRef) {
      this._fbRef.off();
    }
  }

  _getEventFromArgs(args?:string[]) {
    //TODO(jeffbcross): fix this when args parsing doesn't add stupid quotes
    if (args[0] && args[0][0] === '"') {
      args[0] = args[0].replace(/"/g, '');
    }
    if (args && typeof ALLOWED_FIREBASE_EVENTS[args[0]] === 'number') {
      return args[0];
    }
    throw `Not a valid event to listen to: ${args[0]}.
        Please provide a valid event, such as "child_added", by adding it as an
        argument to the pipe: "value | firebase:child_added".
        See https://www.firebase.com/docs/web/api/query/on.html for supported events.`

  }
}

Ionic Version: 1.x / 2.x 2.x Browser & Operating System: iOS / Android / Chrome Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 Run ionic info from terminal/cmd prompt:

Cordova CLI: 5.4.1 Ionic Version: 2.0.0-alpha.57 Ionic CLI Version: 2.0.0-beta.17 Ionic App Lib Version: 2.0.0-beta.8 ios-deploy version: 1.8.3 ios-sim version: 5.0.1 OS: Mac OS X El Capitan Node Version: v5.1.1 Xcode version: Xcode 7.2 Build version 7C68

[adamdbradley]

@davideast Would you have any ideas why this might be?

[adamdbradley]

@Seaborg Out of curiosity, if you were to completely remove Ionic2 from the equation, and it was just an ng2 app without any styles or anything, is it still an issue on Android 4.0?

[Seaborg]

@adamdbradley Good point, just checked this using Angular 2 only with the same result, big delay on the first render? It's interesting that this happens on Samsung devices only. i.e. Samsung S3 Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

but all iphones, and nexus, etc. (checked all available in chrome inspector) render it with no delay, basically it's samsung only.

[adamdbradley]

@Seaborg would you be able to open an issue where ever the firebase pipe is at? This for sure looks like an important issue, but it's not at a level we can fix it, and those who can should probably be given a heads up. Thanks