How to show display image before the data load in ionic 4

I am working on ionic 4 app. my app is working properly. Issue is that now i have list of objects having different prices and details. when i load the page everything is loaded but image take 2 3 second delay after data uploaded. i dont know how to resolve this. my html and .ts code is ass follow. any help would be appreciated.

<ion-row >
    <ion-col size="12" [ngClass]="{'featured': isFeatured() }" class="result-image"
             [ngStyle]="{'background-image': 'url(' + environment.API + 'images/'
             + itemType + '/' + data.coverImage + ')'}" no-padding>
    </ion-col>
</ion-row>
<ion-row>
    <ion-col size="7">{{ data.name }}</ion-col>
    <ion-col size="5">
        <ion-badge *ngIf="offer" class="offer" color="warning">{{ offer.strapline }}</ion-badge>
    </ion-col>
</ion-row>

and my .ts code is as

 isFeatured() {
  return this.data.promotedListing &&
  moment(this.date).isBetween(moment(this.data.promotedFrom), moment(this.data.promotedTo));
 }
checkOffers(result: Venue | Event) {
        const validOffers = [];
        if (result.offers) {
            result.offers.forEach(offer => {
                const rule = new RRule({
                    dtstart: new Date(offer.rrule.dtstart),
                    until: new Date(offer.rrule.until),
                    freq: offer.rrule.freq,
                    byweekday: offer.rrule.byweekday,
                    bysetpos: offer.rrule.bysetpos || null,
                    bymonthday: offer.rrule.bymonthday || null,
                    byyearday: offer.rrule.byyearday || null,
                    count: offer.rrule.count || null,
                    byweekno: offer.rrule.byweekno || null,
                });
                const date = new Date(this.date);
                console.log(date);
                const occurences = rule.between(moment(date).utc().startOf('date').toDate(),
                    moment(date).utc().endOf('date').toDate());
                occurences.forEach(occurance => {
                    validOffers.push(offer);
                });
            });

        }

        if (validOffers.length === 1) {
            this.offer = validOffers[0];
        }

        if (validOffers.length > 1) {
            this.offer = {
                strapline: 'Multiple offers inside',
                description: '',
                duration: '',
            };
        }
    }

check offer is called at ngOninIt.

you can try this …what it does is it will show a default image until the actual image is loaded from the server

but my client dont want a default message he wants smooth animation of both data and image

https://prnt.sc/pzja64 this one is before the image shown and the other one is after the image display https://prnt.sc/pzjabq. All data is using like an object

in default image you can also show gif. So in this way you can show an animated loading gif.

will let you know if anything else comes in my mind.

sure thanks alot i ll wait for your precious response

1 Like

You can use the app shell pattern and add a nice image shell into your app like in the following image. Check this tutorial for more details: https://ionicthemes.com/tutorials/about/improved-ux-for-ionic-apps-with-skeleton-loading-screens

u cna also use a plugin name ionic image loader it gives a lot of option to lazy load images or fall back images until the image gets downloaded and much more.

thanks alot for your response my client like it done

Hi, you can use Infinite Scroll…