I am working on ionic 4 app. i am getting layout problem when i click any venue to check the detail of that venue then venue data overlap over venue detail page for 1 to 2 second as shown in picture. I dont know how could i resolve.https://prnt.sc/px8fs7. My code for venue detail is as below
<ion-content *ngIf="venue" style="overflow: hidden;">
<div>
<ion-slides
[options]="slideOptions"
pager="true"
#slider
(ionSlidesDidLoad)="slidesDidLoad(slider)"
>
<ion-slide>
<div
class="header-image"
[ngStyle]="{
'background-image':
'url(' +
environment.API +
'images/venue/' +
venue.coverImage +
')'
}"
>
<div *ngIf="mapView" >
<ion-button style="margin-left:-275px;" (click)="backButton()">
<ion-icon
slot="icon-only"
src="../../../assets/icon/back-arrow.svg"
></ion-icon>
</ion-button>
</div>
</div>
</ion-slide>
</ion-slides>
</div>
<!-- </div> -->
<ion-grid class="bumper">
<ion-row>
<ion-col
><h1>{{ venue.name }}</h1></ion-col
>
</ion-row>
<ion-row>
<ion-col>
<p>{{ venue.street1 }}</p>
<p style="margin-top: -15px">{{ venue.street2 }}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ul class="info">
<li class="price" [ngClass]="venue.type.toString().toLowerCase()">
£{{ venue.averagePrice | number: "1.2-2" }}
</li>
<li class="secondary">{{ venue.secondaryInfo }}</li>
<li class="time">{{ getTime() }}</li>
</ul>
</ion-col>
</ion-row>
<ion-row margin-bottom>
<ion-col size="12">
<ul class="tags" *ngFor="let tag of venue.tags">
<li>{{ tag.name }}</li>
</ul>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<!-- <h2>{{ venue.strapline }}</h2> -->
<p>{{ venue.description }}</p>
</ion-col>
</ion-row>
<ion-row *ngIf="venue.offers.length > 0">
<ion-col><h1>Offers</h1></ion-col>
</ion-row>
<ion-row *ngFor="let offer of venue.offers">
<ion-col>
<ion-badge color="warning" no-margin>{{ offer.strapline }}</ion-badge>
<p style="margin-top: 0.4em">{{ offer.description }}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h1>Opening Times</h1>
<ion-grid no-padding no-margin>
<ion-row *ngFor="let times of venue.openTimes" no-padding no-margin>
<ion-col size="4" class="times">{{
getDayName(times.dayNo)
}}</ion-col>
<ion-col size="8" class="times" *ngIf="times.isOpen === false"
>CLOSED</ion-col
>
<ion-col size="8" class="closetime" *ngIf="times.isOpen === true"
>{{ times.openTime.substring(0, 5) }} -
{{ times.closeTime.substring(0, 5) }}
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
<div id="map_canvas"></div>
<ion-grid class="bumper" *ngIf="events.length > 0">
<ion-row>
<ion-col><h2>Upcoming Events</h2></ion-col>
</ion-row>
<app-result-item
*ngFor="let e of events; let i = index; let c = count"
[routerLink]="['/tabs', 'events', e.id, e.instanceDate]"
itemType="event"
[date]="e.instanceDate"
[data]="e"
[index]="i"
[count]="c"
[showDate]="true"
></app-result-item>
</ion-grid>
</ion-content>