1

Here, first of all you can check the current status of the app without virtual scrolling:

PokeDex - Webapp

Image Preview Of the Website Here

The scrolling is pretty smooth but as you can see searching and navigating back and forth is a bit slow as there's a reloading of the DOM. Its not the searching logic that is slow as I'm just using a simple pipe to filter out the Pokemon list based on only Pokemon Names and ID. I have tested and found out that the culprit is the insane no of Elements in the DOM. (There are nested Divs in each Pokemon Item)

The pokemon list component without Virtual Scrolling.:

<div class="row justify-content-center">
   <app-pokemon-item *ngFor="let pokemon of pokemons | searchFilter: searchItem; let i = index;"
                      [pokemon]="pokemon"></app-pokemon-item>
</div>

So now I'm trying to implement Virtual Scrolling to improve performance but this happens:

  1. The list shutters a lot while scrolling.(Doesn't Feels like normal scrolling).
  2. The Pokemon Images are disturbed (shuffled/randomized).
  3. The Images are not even static the images for a single Pokemon change on scrolling up and down.
  4. Also I want to retain the previous Grid look.

Modified Pokemon list Component with Virtual Scrolling.

<cdk-virtual-scroll-viewport style="height: 90vh" itemSize="100">
  <ng-container *cdkVirtualFor="let pokemon of pokemons | searchFilter: searchItem; let i = index;">
    <app-pokemon-item [pokemon]="pokemon"></app-pokemon-item>
  </ng-container>
</cdk-virtual-scroll-viewport>

The Problem

Shivam Baghel
  • 121
  • 1
  • 5

1 Answers1

0

I was having the same issue as you and fixed it by adding templateCacheSize: 0.

this was answered here

Dradel
  • 1
  • 1