I have a list of cards that contains charts, images on it. Since the chart data and image requests slowdown my application, I thought to follow a virtualization technique. I'm currently using ngx-perfect-scrollbar and I'm about to use the virtual scrolling feature of it. But I need to know is there a better and faster way that I can visualize the data without lagging the application?'
Below is the code snippet I'm using the create the cards and a sample image of the interface.
<perfect-scrollbar class="{{isMobileDevice ? 'mobile-perfect-scrollbar' : ''}}">
<div class="wl_tile_container_holder">
<div *ngFor="let item of rowData" class="wl_tile_container" (click)="onClickTileView(item)">
<app-watchlist-tile [data]="item"
[isFullMarket]="isFullMarket"
[isDefinedWatchlist]="isDefinedWatchlist"
[selectedWatchList]="selectedWatchList"
[fullView]="fullView"
(menuItemClicked)="onSelectMenuItem($event)">
</app-watchlist-tile>
</div>
</div>

Full virtualization offers the best isolation and security for VMs and simplifies migration and portability as the same guest OS instance can run on virtualized or native hardware