Menu Icon Loads Late

Ionic Framework ionic-v3
1

I have a menu icon that will sometimes not show up until half a second after the title appears. To me this looks shabby.

Is there a way to fix this?

If not I will just carry on.

2

Are you using the default starter ionic project? Have you modified any code? Can you show some code, so we can look, if anything is not correct?

3

I used the blank template. My project is pretty big and I have made some changes to the app.component.ts. I will make a new project to compare then I will return with my app component code.

4

The same thing happens in a fresh project.

app.html

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
      <p>some menu content, could be list items</p>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

home.html

<ion-header>
  <ion-navbar>
    <button ion-button large menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="reloadPage()" >Reload Page</button>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }

  reloadPage(){
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
  }

}

I’m going to tally this up to how ionic loads components within the header. But it doesn’t look too good when that menu icon flickers between leaving and entering the view.

5

There seems to be a problem with menuToggle. If i use a workaround with a normal button, it works as intended.

<ion-buttons left>
  <button ion-button large (click)="menuCtrl.toggle()" margin-horizontal>
    <ion-icon name="menu" style="font-size: 1.7em" ></ion-icon>
  </button>
</ion-buttons>

Here you can see it in action:

I created an issue:

6

Thank you for this work around. Everything loads super smooth.