I am working on optimizing a mobile app (built with angular1/ionic1) for iPad and have been running into issues. I am trying to create a two column masonry effect that loads each "card item" (returned from a network request) from left to right. I am using Angular-Masonry which seems to work very well locally but not very well when i test on an actual iPad. I am testing on my iPad Mini 2 (which is around 3 years old) and when the app first loads, for around a second, all of the images returned from the network request stack/overlap on top of each other before the masonry effect kicks in and formats it the way I want it to. The app also uses ionic infinite scroll so when users scroll down, another network request is made which returns more "card items". These card items also stack on top of each other for around a second upon first being rendered to the page.
I feel as if this could be a performance issue. The reason I think this is because Angular Masonry works very well locally and this "overlap" bug only happens when i test on my iPad Mini 2.
Does anyone have any experience using Angular-Masonry with Ionic Apps? I have been working on trying to fix this for days and am unable to pinpoint what exactly is going wrong.
You can see here where I am including the Angular-Masonry directives "masonry" to the containing div and "masonry-brick" to each "card item".
<ion-content class="articleContent" scroll="false">
<ion-slide-box slide-tabs-scrollable="true" show-pager="false" on-slide-changed="changeSlide(index)" bounce="false" ion-slide-tabs>
<ion-slide ng-repeat="tab in contents track by $index" ion-slide-tab-label="{{tab.category}}">
<ion-content>
<div class="ipadDiv" ng-switch="tablet">
<div ng-switch-when="true" column-width="60" masonry load-images="false">
<ion-list ng-if="tab.posts.length > 0">
<ion-item class="masonry-brick card" ng-repeat="post in tab.posts track by $index" type="item-text-wrap" ng-click="goto(tab.category, $index)">
<img ng-src="{{::getThumbnail(post.thumbnail)}}" ng-if="::getThumbnail(post.thumbnail) != false">
<div class="text">
<strong ng-bind-html ="::post.title"></strong>
<p class="article-date"> {{::postDate(post.date)}}</p>
</div>
</ion-item>
<div ng-if="showInfiniteLoader && tab.posts.length > 0">
<ion-infinite-scroll distance="15%" ng-if="!showLoadMore"></ion-infinite-scroll>
<ion-infinite-scroll on-infinite="loadMoreArticles(tab.category)" distance="15%" ng-if="showLoadMore"></ion-infinite-scroll>
</div>
<br>
</ion-list>
</div>
<div class="masonryDiv" ng-switch-when="false">
<ion-list ng-if="tab.posts.length > 0">
<ion-item class="card" ng-repeat="post in tab.posts track by $index" type="item-text-wrap" ng-click="goto(tab.category, $index)">
<img ng-src="{{::getThumbnail(post.thumbnail)}}" ng-if="::getThumbnail(post.thumbnail) != false">
<div class="text">
<strong ng-bind-html ="::post.title"></strong>
<p class="article-date"> {{::postDate(post.date)}}</p>
</div>
</ion-item>
<div ng-if="showInfiniteLoader && tab.posts.length > 0">
<ion-infinite-scroll distance="15%" ng-if="!showLoadMore"></ion-infinite-scroll>
<ion-infinite-scroll on-infinite="loadMoreArticles(tab.category)" distance="15%" ng-if="showLoadMore"></ion-infinite-scroll>
</div>
<br>
</ion-list>
</div>
</div>
</ion-content>
</ion-slide>
</ion-slide-box>
</ion-content>
