Ionic 4: Rendering of div faster than ion elements on iOS

Hey Guys!

I noticed a rendering issue after upgrading to Ionic 4 and provided a demo project on Github as well as a video to show my issue.

Video: https://vimeo.com/318454429

The following can be noticed in the video:

After changing the Tab, I fetch some posts over http. After that, I iterate with *ngFor over the posts and for a few milliseconds my div background cards are visible but empty. Then the ion-grid will be rendered and the content of the cards will be displayed. Actually, for me this is kinda ugly and I don’t know how to solve this. With ionic 3 and the same code everything was rendered at the same time and there weren’t any “empty bubbles” visible.

Github Project: https://github.com/Mike1707/ionic4-rendering-issue

Maybe you guys have any advises for me.

Thanks,
Mike

Related Code:

<ion-content>
  <div padding>
    <div padding-bottom *ngFor="let post of posts; trackBy: trackByPostId">
      <div padding class="background-card">
        <ion-grid>
          <ion-row>
            <ion-col>
              <h4>{{post.title}}</h4>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              {{post.body}}
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </div>
  </div>
</ion-content>
.background-card {
  background: white;
  position: relative;
  border-radius: 15px;
  -webkit-box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
}
async ngOnInit(): Promise<void> {
    this.posts = await this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts').toPromise();
}

trackByPostId(index: number, post: Post) {
    return post.id;
}
interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

You posted your internal edit-link to the video instead of the public link.

@Reesz Oh sorry, I updated the link! This is the link: https://vimeo.com/318454429

If you put a *ngIf at the first div, will it render first too?

<div padding *ngIf="posts">

Hey @tokuhara. Unfortunately yes. No change with *ngIf. You can see in the video that there are many “bubbles”. Therefore the *ngFor iterates and posts has to exist.