4

I made an infinite scroll directive, and it works great for my use cases.

There is one problem, however.

When the infiniteScrollAction is triggered by scrolling with the mouse wheel, the HTTP call that is made in the function I call has a really long abnormal delay in the response... For example it takes roughly 3-5 seconds for the response to come back -- guaranteed every time.

However, when I scroll with the browser scrollbar, the response goes back to normal and is the same length it would normally be (very quick).

I can repeat this over and over again with success.

Here are some GIF's to demonstrate. The first is scrolling with mousewheel, notice how the loading bar at the top is very slow because the response is taking a while. The second is scrolling with the browser scrollbar, fast response. Both images cropped and blurred for privacy:

enter image description here

enter image description here

Can someone please find anything wrong with the directive? I don't understand... at first I thought it had something to do with the event loop, but I console.log() inside each function call all the way up to the HTTP call function, and everything happens instantanious.

It's literally the response that takes longer, depending on whether I scroll with the mousewheel or with the browser scrollbar, which is absolutely ludicrous but it's what happening. I can't figure out what's wrong. But I can prove this is the case because I can see the response as pending in the network tab on Chrome when I scroll with mousewheel, but it doesn't stay in pending for that long when I scroll with scrollbar.

Lansana Camara
  • 9,497
  • 11
  • 47
  • 87
  • If you are making HTTP call which changes structural directive so it will definitely create problem for you as it is not recommended by Angular consider the official angular docs. – Adnan Jun 19 '18 at 07:55

1 Answers1

0

Have you seen this Random high content download time in chrome? ?

I'm using ngx-infinite-scroll and I encountered the same issue.

So my solution (thanks to mentioned post) : 

export class InfiniteScrollDirective {
...
    @HostListener('mousewheel')
    onMouseWheel() {
    }
...
}

Even without any implementation, just pure listener has solved the issue. No more slow http request after.

Could you try ?

Thierry Falvo
  • 5,892
  • 2
  • 21
  • 39