Collection-repeat + ion-infinite-scroll performances on beta 13

ionic-v1
1

I am facing performances issues related to using collection-repeat together with ion-infinite-scroll using beta 13 that I didn’t find documented anywhere.

I have found a lot of discussions regarding scrolling performances but nothing related to the impact of adding ion-infinite-scroll after a collection-repeat.

I have a quite long list (up to 10K items) which I load by 250 at the time and where each record points to a remote HTTP image and a few values.

By using the following Template, the scrolling is quite smooth as long as I don’t add the ion-infinite-scroll:

<ion-content class="has-header" scroll="false">
<ion-scroll direction="y" style="width: 100%; height: 100%">

    <div class="list item-list-collection">
        <a class="item item-content item-offset-preview"
           collection-repeat="item in items"
           collection-item-height="100"
           ng-href="#/app/item/{{item.RelativeId}}">
            <img class="item-image-preview" src="{{item.ImageUrl}}"  />

            <h2>{{sources[item.SourceId].Name}}</h2>

            <p>
                {{dateToStr(item.TimeStamp)}}
                <br />
                {{(item.Duration / 1000).toFixed(1)}}s - {{itemTypeIdToStr(item.ItemType)}}
            </p>

            <i class="icon ion-chevron-right"></i>
        </a>
    </div>

    <!-- infinite scroll not visible after a collection-repeat in beta13 -->
    <!-- <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="0%"></ion-infinite-scroll> -->

</ion-scroll>
</ion-content>

I have found a quite efficient workaround that consists of removing the ion-infinte-scroll and loading more data on demand using the $ionicScrollDelegate directly like this:

Add delegate-handle and on-scroll to the ion-scroll:

 <ion-scroll delegate-handle="libScroll" on-scroll="checkScroll()" direction="y" style="width: 100%; height: 100%">

handle checkScroll() in JS:

    $scope.checkScroll = function () {

        var currentTop = $ionicScrollDelegate.$getByHandle('libScroll').getScrollPosition().top;
        var maxTop = $ionicScrollDelegate.$getByHandle('libScroll').getScrollView().__maxScrollTop;

        if ((currentTop >= maxTop) && (!$scope.libraryLoading))
        {
            $scope.loadMore();
        }
    }

Doing so, the performances are almost identical (than disabling infinite-scroll) and scrolling is at about twice faster compared to having ion-infinite-scroll after my collection and I have the functionality working.

I don’t see the loader icon but I was anyway not seeing it even with ion-infinite-scroll when using collection-repeat as already reported in issue 2399
.
Is there a reason behind because I don’t really understand why ion-infinite-scroll affects scrolling performances?

Did I take the good option for best scrolling performances on infinite lists in collection-repeat ?

Thanks!

3 Likes
2

I am a beginner in ionic and hence a codepen example of your technique will be really helpful @ferretizer.

3

This shows the idea:

I actually didn’t try with beta-14 to see if the official approach works better now.

4

@ferretizer, I just copied your approach and it works fine, thanks! Did you open an issue about the performance of ion-infinite-scroll in combination with collection-repeat (or come accross one on GitHub)?

5

okay i am referencing @mhartington maybe he knows what is to do :wink:

6

So collection-repeat and infinite-scroll?

Yeah they work pretty well together.
One issue that we are working on is the visibility of the icon.

7

Thanks, I managed to get that far, but performance seems worse than without ion-infinite-scroll. I’ll try it again!

8

I updated all libs to the latest version (Beta 14), and performance seems to be good now. Thanks!