title: Angular2 large list scroll performance
body: <p>I have an Angular4 app with an endless list, using <code>ngx-infinite-scroll:0.5.1</code>. I am also using lazy loading for each section of the website.</p>
  
  <p>When I first enter the section with the large infinite-scroll-list, the performance is quite good, the scroll events are very responsive and everything feels quite smooth. I can then scroll to the end of the list (1000 component items), loading and attaching further chunks to the list, like so:</p>
  
  <pre><code>addToTileListData(tileDataList: any) {
  
     // Build temp list
     let tempTileDataList: List&lt;PxTile&gt; = List&lt;PxTile&gt;();
  
     for (let tileData of tileDataList.body) {
  
       const tile: PxTile = tileData as PxTile;
       tempTileDataList = tempTileDataList.set(tempTileDataList.size, tile);
     }
  
     // Merge temp list with visible data
     const newList = &lt;List&lt;PxTile&gt;&gt;this.tileList.concat(tempTileDataList);
     this.setTileList(newList);
  }
  </code></pre>
  
  <p>The 1000 components are immutable.js items using <code>ChangeDetectionStrategy.OnPush</code></p>
  
  <p>When I leave the section and enter another lazy loading section, the previous section with the large list is destroyed.</p>
  
  <p>But when I then navigate back again to the section with the large infinite list, the list quickly becomes very sluggish while scrolling, up to the point that, when I scroll to the end of the list of 1000 items, the scrolling almost freezes.</p>
  
  <p>Do you have any suggestions what the problem could be? Or how I should proceed? Does this problem sound like a memory leak?</p>
  
  <p>If I check the performance tab of the Chrome developer tool I can see that at the same time, dozends of scoll events stack on top of eachother:</p>
  
  <p><a href="https://i.stack.imgur.com/Kimid.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kimid.png" alt="enter image description here"></a></p>
  
  <p>Thanks a bunch for your help!</p>