Как исправить виртуальную прокрутку CDK в приложении Angular 9. [PokeDex App]

Question

Здесь, в первую очередь, вы можете проверить текущий статус приложения без виртуальной прокрутки:

PokeDex - Webapp

Предварительный просмотр сайта Здесь

Прокрутка довольно плавная, но, как вы можете видеть, поиск и навигация назад и вперед немного медленны, поскольку происходит перезагрузка DOM. Это не логика поиска c, которая медленная, поскольку я просто использую простой канал для фильтрации списка покемонов на основе только имен и идентификаторов покемонов. Я проверил и обнаружил, что виновником является безумное нет элементов в DOM. (В каждом элементе покемонов есть вложенные элементы Div)

Компонент списка покемонов без виртуальной прокрутки .:

<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>

Итак, сейчас я пытаюсь реализовать виртуальную прокрутку для повышения производительности, но это происходит :

1. При прокрутке список часто закрывается. (Не похоже на обычную прокрутку).
2. Изображения покемонов искажены (перемешаны / рандомизированы).
3. Изображения даже не сохраняются c изображения для одного покемона изменяются при прокрутке вверх и вниз.
4. Также я хочу сохранить предыдущий вид сетки.

Модифицированный покемон list Компонент с виртуальной прокруткой.

<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>

Проблема