[Ionic 3] Modal delay

Hey guys could anyone give me some help?
I already tried on Ionic 3 and Ionic 4 but I have a main screen on my app with a list of cards then when they are clicked a modal open with all details from the item but I’m having a huge delay around 3 seconds to open the Modal , could anyone help please ?

thanks in advance

When I had this issue, it was because of the modal page being too loaded with components. Also I used a structural directive (ngFor) which took lots of resources in Angular change detection.

Experiments with 2000 ion-items showed that these webcomponents in comparison with no webcomponent also hurt, even though one may wonder what the use case is of displaying 2000 items to a user at once.

ngFor can be optimised with a TrackedBy function, general page performance can be optimised by ChangeDetectionStrategy.OnPush

Assuming you are working on Angular of course…

Consider using the chrome performance tools to measure where the resource consumption is highest.

1 Like

If the dom element is “DIV” or non “A” / “BUTTON”.
Please add “tappable” attribute, eg:

<div tappable (click)="callback()">click me</div>

Hey Guys!

First of all thanks for the quick replies i will show you some of my code, on the “origin page”:

>  <ion-grid style="margin-top:1%;margin-bottom: 5%;" *ngIf="selected != 'Item'">
>     <ion-row>
>       <ion-col col-6 *ngFor="let item of itemList">
>         <ion-grid style="box-shadow: 1px 3px 9px -2px #000000;" (click)="openModal(item);">
>           <ion-row>
>             <ion-col col-3>
>               <ion-thumbnail item-start>
>                 <img width="120px" height="120px" style="border-radius: 100%"
>                   [src]="item.photo? item.photo: handleError(item)" />
>               </ion-thumbnail>
>             </ion-col>
>             <ion-col col-9 style="margin-top: 15px">
>               <ion-row>
>                 <ion-col col-md-8 col-sm-12 style="border-bottom: 1px solid #dedede;height: 30px;">
>                   <h5>{{item.sdd}}</h5>
>                 </ion-col>
>                 <ion-col col-md-4 col-sm-12 text-right style="border-bottom: 1px solid #dedede;height: 30px;">
>                   $<span class="rec"> 16,50</span>
>                 </ion-col>
>               </ion-row>
>               <ion-row>
>                 <ion-col col-10>
>                   {{item.i1}} {{checkValue(item.i2)}} {{checkValue(item.i3)}}
>                   {{checkValue(item.i4)}}
>                 </ion-col>
>               </ion-row>               
>             </ion-col>
>           </ion-row>
>         </ion-grid>
>       </ion-col>
>     </ion-row>
>   </ion-grid>

When you click on the ion-col it opens the modal with this content:


> <ion-content padding>
>   <ion-grid>
>     <ion-row>
>       <ion-col col-2 style="border-right: 2px solid rgb(122, 193, 67);">
>         <ion-row text-center>
>           <ion-col text-center>
>             <h3><strong>{{itemData.name}}</strong></h3>
>           </ion-col>
>         </ion-row>
>         <ion-row>
>           <ion-col text-center>
>             <img width="150px" height="150px" [src]="itemData.photo ? itemData.photo : itemData.imgerror" />
>           </ion-col>
>         </ion-row>
>         <ion-row text-center>
>           <ion-item>
>             <strong>Composite Values:</strong>
>           </ion-item>
>           <ion-item no-lines class="item-ing" style="margin-top: 10px;">
>             {{itemData.i1}}
>           </ion-item>
>           <ion-item no-lines class="item-ing" *ngIf="itemData.i2">
>             {{itemData.i2}}
>           </ion-item>
>           <ion-item no-lines class="item-ing" *ngIf="itemData.i3">
>             {{itemData.i3}}
>           </ion-item>
>           <ion-item no-lines class="item-ing" *ngIf="itemData.i4">
>             {{itemData.i4}}
>           </ion-item>
>         </ion-row>
>         <ion-row text-center>
>           <ion-item>
>             <strong>Informações:</strong>
>           </ion-item>
>         </ion-row>
>         <ion-row>
>           <ion-item *ngIf="itemData.cat != 'Pudm'" no-lines text-wrap>
>             {{itemData.txtinfo}}
>           </ion-item>
>           <ion-item *ngIf="itemData.cat === 'Pudm'" no-lines text-wrap>
>             {{itemData.inf}}
>           </ion-item>
>         </ion-row>
>       </ion-col>
>       <ion-col col-1></ion-col>
>       <ion-col col-8>
>         <!-- Form  -->
>         <form>
>           <!-- tmp -->
>           <ion-row *ngIf="itemData.cat === 'sh' || itemData.cat === 'sp' " style="height: 50px;">
>             <ion-col col-5 style="    border-right: 2px solid rgb(122, 193, 67);">
>               <ion-row>
>                 <ion-col>
>                   <ion-item no-lines>
>                     <strong>tmp:</strong>
>                   </ion-item>
>                 </ion-col>
>               </ion-row>
>             </ion-col>
>             <ion-col>
>               <ion-row>
>                 <ion-col offset-1>
>                   <ion-item no-lines>
>                     <strong>csm:</strong>
>                   </ion-item>
>                 </ion-col>
>               </ion-row>
>             </ion-col>
>           </ion-row>
>           <ion-row *ngIf="itemData.cat === 'sh' || itemData.cat === 'sp' " style="height: 50px;">
>             <ion-col col-5 style="border-right: 2px solid rgb(122, 193, 67);">
>               <ion-item text-center no-lines style="height: 50px;">
>                 <ion-label style="margin-top: 10px;margin-left:15%; position: fixed;">
>                   <ion-icon name="bonfire" color="danger"></ion-icon> &nbsp;&nbsp;ght
>                 </ion-label>
>                 <ion-toggle name='tog' style="margin-left: 24%" color="tertiary"
>                   [checked]="itemPedidoTemp.tmp === 'ggd' ? false : true" (ionChange)="muTemp($event)">
>                 </ion-toggle>
>                 <ion-label style="margin-top: 10px; margin-left: 1%;  position: fixed;">
>                   <ion-icon name="snow" color="primary"></ion-icon> &nbsp;&nbsp;ggd
>                 </ion-label>
>               </ion-item>
>             </ion-col>
>             <ion-col>
>               <ion-row style="align-content: flex-end;height:50px">
>                 <ion-col col-6 offset-1>
>                   <ion-item no-lines>
>                     <ion-label>cst</ion-label>
>                     <ion-checkbox color="success" name="cst"
>                       [checked]="itemPedidoTemp.ssd === 'stt' ? true : false"
>                       (click)="mdCons($event,'ssd')" text-center></ion-checkbox>
>                   </ion-item>
>                 </ion-col>
>                 <ion-col>
>                   <ion-item no-lines>
>                     <ion-label>ssr</ion-label>
>                     <ion-checkbox color="success" [checked]="itemPedidoTemp.cst === 'ssr' ? true : false"
>                       (click)="mdCons($event,'ssr')" text-center></ion-checkbox>
>                   </ion-item>
>                 </ion-col>
>               </ion-row>
>             </ion-col>
>           </ion-row>
>           <!-- aak -->
>           <ion-row class="topline">
>             <ion-item no-lines>
>               <strong>aak:</strong>
>             </ion-item>
>           </ion-row>
>           <ion-row>
>             <ion-col *ngFor="let aak of lsaak" col-4 style="height: 40px" text-center>
>               <ion-list radio-group text-center>
>                 <ion-item no-lines>
>                   <ion-label>{{aak.value}}</ion-label>
>                 </ion-item>
>               </ion-list>
>             </ion-col>
>           </ion-row>
>           <!-- lsKK -->
>           <ion-row class="topline">
>             <ion-item no-lines>
>               <strong>lsKK:</strong>
>             </ion-item>
>           </ion-row>
>           <ion-row>
>             <ion-col *ngFor="let kk of lsKK" col-4 style="height: 40px" text-center>
>               <ion-list radio-group text-center>
>                 <ion-item>
>                   <ion-label>{{kk.title}}</ion-label>                 
>                 </ion-item>
>               </ion-list>
>             </ion-col>
>           </ion-row>
>           <!-- Observações -->
>           <ion-row class="topline">
>             <ion-col>
>               <ion-item no-lines>
>                 <strong>obs:</strong>
>               </ion-item>
>               <ion-item>
>                 <ion-textarea name="obs" [(ngModel)]="itemPedidoTemp.obs" type="text"
>                   placeholder="sfs..."></ion-textarea>
>               </ion-item>
>             </ion-col>
>           </ion-row>
>         </form>
>       </ion-col>
>       <!-- <ion-col col-1></ion-col> -->
>     </ion-row>
>   </ion-grid>
>   <ion-fab bottom right>
>     <button ion-button class="size" color="success" (click)="gogogo()">go</button>
>   </ion-fab>
>   <ion-fab bottom left>
>     <button ion-button class="size" color="danger" (click)="closeModal()">back</button>
>   </ion-fab>
> </ion-content>

Anyone got any idea how i could get a better modal without delay? i was thinking about get this both ngFor from cache its a good idea?

The DOM element that call the modal is a ion-grid i will try to add the tappable, thanks!:grinning:

Well sadly not worked :pensive:

So, where is the delay occur? after click event fire? before modal appear?

take the images out of the list and see if it effects the performance of the list… also how many items are there in the list?

I tried that too!
There are only 65 itens,i tried to change the template to make more cleaner, but the delay is around 3 seconds, you click then wait 3 seconds to the modal appear and the checkboxes when you select on the device have a SLOW animation for checking.

when you click on the item , then we got this 3seconds delay then the modal appear

You mean
a) clicked, “openModal” fired, and wait 3sec, and modal appear
or
b) clicked, wait 3sec, “openModal” fired, and modal appear

I tracked it down was the A option clicked, “openModal” fired, and wait 3sec, and modal appear

any ideas? :frowning: someone?