Ionic 4 : slow navigation

#1

On the first page, I have slides and inside each of these slides, there is a scrollable list of cards. Cards contains multiple elements including ion-img tag to be used as a background.

I am using slides as a container of list because I want list width to be resizable (when pinched) without losing scroll position, and also give snapping effect of the slide component.

if there is only one or two slides in the page, I hardly notice any delay but when I add more slides, (assuming 10 slides, 30 images per list) clicking menu and navigating to another page becomes extremely slow.
(also tried running the app with --prod)

could anyone recommend workaround to solve this?

<ion-content fullscreen scrollY=false forceOverscroll (pinchend)="onPinchEnd($event)" (pinchstart)="onPinchStart($event)">


  <ion-slides [options]="slideOpts" #mySlides >

        <ion-slide  *ngFor="let num of data">
          <ion-card class="feed-name">
            <ion-card-header>
              <ion-card-title>Office</ion-card-title>
            </ion-card-header>
          </ion-card>

          <ion-content>

          <ion-refresher (ionRefresh)="doRefresh($event)">
            <ion-refresher-content
              pullingIcon="arrow-dropdown"
              pullingText="Pull to refresh"
              refreshingSpinner="circles"
              refreshingText="Refreshing...">
            </ion-refresher-content>
          </ion-refresher>

                  <ion-list>

                    <ion-card *ngFor="let num of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]" style>
                      <img class="card-background-image" src="url/of/image"/>
                        <div class="badge-container">
                          <div class="spacer-padding"></div>
                          <div class="badge"></div>
                          <div class="spacer"></div>
                          <div class="badge"></div>
                          <div class="spacer"></div>
                          <div class="badge"></div>
                        </div>
                    </ion-card>

                  </ion-list>
                  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
                    <ion-infinite-scroll-content
                      loadingSpinner="bubbles"
                      loadingText="Loading more data...">
                    </ion-infinite-scroll-content>
                            </ion-infinite-scroll>
    </ion-content>
            </ion-slide>

Ionic:

ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/core : 7.2.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/ng-toolkit : not installed
@ionic/schematics-angular : not installed

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 10 other plugins)

System:

ios-deploy : 1.9.2
NodeJS : v10.12.0 (/usr/local/Cellar/node/10.12.0/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61