Infinity Scroll keep loading circle active


#1

Hi there, I’ve implemented infinity scroll successfully. Works great, however if the list of content does not reach the bottom of my screen and total items have not finished yet, my loading circle is always being displayed.

For example: If I’ve got 10 registers in a list (Total) and I’ve set up my infinity scroll to load 5 items per request and those first 5 items don’t reach the end of my screen (bottom) my loading scroll is displayed until I scroll down again and loads more (in order hide under the limit of page), or finish my list (Where I fire a NO MORE ITEMS event).

Extra: I’ve included: $scope.$broadcast(‘scroll.infiniteScrollComplete’); and it’s being received on ionic.bundle.js with no problems. (I’ve also found out that there’s a $element[0].classList.add(‘active’); when scroll start and a $element[0].classList.remove(‘active’); for the broadcast set. But scroll won’t disappear.

Any suggestion? Thanks very much!


#2

@kzoty Can you please share your controller code and ion-infinite list tag markup ?

I suspect , you are not using ng-if to know weather there is more data to load or not?
Please share plunker if possible .

You can have a look at this for seeing a live demo on codepen

OR
Read here

Hope this helps :smile:


#3

Thanks for your reply.
It would be a little confusing sharing my code, once I load data from a rest api and I have no TOTAL rows, I set my “no-more-data” var when my request is empty or fewer than “items-per-request”. It’s working as expected, once there’s no more content to load, infinity scroll is disabled.

CTRL:
$scope.keepLoading = true;

(…Here I’ve got a service that returns my list of records… working fine, I send parameters like: start_row and limit).
service.query(parameters).then(function(response) {
if( !response.data.rows.length || $scope._listOfRecords.length < itemsPerPage ) {
$scope.keepLoading = false;
}
$scope.$broadcast(‘scroll.infiniteScrollComplete’);
});

  • As as said, my “keepLoading” flag is smooth, the only issue is concerning the LOADING gif that will ONLY hide if keepLoading is set false and my entire will disappear.

(HTML tag).

Apparently some internal infinity scroll function seen not to be interaction properly with my DOM. I’ve DEBUGGED with console.log() and $broadcast is getting there correctly.

Thanks again.


#4

@kzoty I have created another codepen to explain this with $http

have a look

please ignore javascript lops etc… its just to demo


#5

@d4dilip I apreciate your time and interest to help me. I’ve looked at your code and saw no difference from mine actually. In fact, I’m having no problem with infinity scroll itself or rest request… My only problem the LOADING gif component that won’t hide after each request. (Request worked perfectly and $broadcast too) it seen to be a matter of CSS or something…

Thanks again.


#6

Well I do not get such scenario here … may be you are right it could be some CSS magic :wink:
have you tried it in a separate sample code just infinite scroll+ REST call+ionic js+css library ?

Good luck with that buddy … lemme know if I can be any help


#7

Hey Kzoty, if I understand your problem, I think I had a similar issue, where the loading gif was always shown at the endof my list. I noticed by looking at the css that this loading gif was hidden / shown just by changing it’s top value. I fixed my problem by overwriting this values.
I hope this can help you. I am just answering by memory, so if you want more precise info about this, let me know and I can try to give a better explanation :wink:


#8

@mhartington
Maybe ionic should implement that the “on-infinite” function must return a promise.

So they could display the loading icon if function is called and hide it if the promise gets rejected/resolved.

Greetz, bengtler.


#9

As matter of fact, that’s what I’ve done, I created a CSS to overwrite including a display: none when every request is finished, and another display: block for new start request.

Thanks.