Side Menus Appears before app load

1

I may be doing something wrong here - and probably am - but when my app loads, the content within the <ion-side-menu> appears briefly before loading the actual app. Maybe this is just an issue with content in the index.html. My index.html as follows:

<body ng-controller="AppCtrl">

  <ion-side-menus>
    <!-- Center content -->
    <ion-side-menu-content>
      <ion-nav-bar class="bar-assertive nav-title-slide-ios7">
        <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <div class="buttons">
          <button class="button button-icon icon ion-ios7-gear-outline"></button>
        </div>
        <h1 class="title">robus</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item href="" ui-sref="workouts" menu-close>
            <strong>Workouts</strong>
          </ion-item>
          <ion-item href="" ui-sref="logs" menu-close>
            <strong>Logs & Statistics</strong>
          </ion-item>
          <ion-item href="" ui-sref="logs" menu-close>
            <strong class="assertive">Logout</strong>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
  </ion-side-menus>

</body>

Am I structuring this incorrectly? Simple left menu with some content in the middle.

Anyone else seeing this issue?

2

Hi Dave - Iā€™m having the same issue (this is what I briefly see when my app first loads). Did you ever figure out a way around this?

And this is what my code looks like:

    <ion-side-menus>       
  <ion-side-menu-content drag-content="nitroGlobals.loggedIn && nitroGlobals.showSideMenu">              
    <ion-nav-view></ion-nav-view>
 
  </ion-side-menu-content>         
  <ion-side-menu side="right">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Right Menu</h1>
    </ion-header-bar>

    <ion-content>
      <ul class="list">
        <a  ng-repeat="sideMenuLink in nitroGlobals.addLinks" ng-click='openExternalLink(sideMenuLink)' 
            href="#" class="item item-icon-right" menu-close>
              <i class="icon ion-log-out"></i>{{sideMenuLink.name}}</a>            
        <a ui-sref="login({loginType:'logout'})" class="item" menu-close ng-show="nitroGlobals.menuItems.Logout">
              Logout</a>  
      </ul>
    </ion-content>

  </ion-side-menu>        
</ion-side-menus>

thanks, - rajat

3

Try using ng-cloak of the angular. It will hide the uncompiled code while application is loading.

2 Likes
4

That works great, thanks!

1 Like
5

dave can you tell me if you solve it? and how did you do?? thank you @dave

6

Turns out that what worked for me is manually bootstrapping the application. Since the app runs inside of Cordova, I do something like this:

if (window.cordova) {
    document.addEventListener("deviceready", function() {
        angular.bootstrap(document.body, ["myAppModule"]);
   }
}