Angular Prerender Problem Jumbotron preloaded image small parts of image on left side

Question

The problem: when the web page first loads, the jumbotron image first shows up in small parts on the left side and the text is duplicated, then after a fraction of a second everything is normal.

Image before fully loaded.

This is an Angular website. The problem seems to show up after the website is server-side rendered and remains after it is prerendered. I don't notice it while serving it in development. I also only notice the problem on the home page. Jumbotron images on all other pages are apparently fine.

In the apps index.html file, I preload the image in two different sizes...

    <link rel="preload" href="/assets/images/female-entrepreneur-smiling-office-webdev.webp" as="image">

  <link rel="preload" href="/assets/images/female-entrepreneur-smiling-webdev.webp" as="image">

The images are webp. The image sizes are 11 KB and 49 KB.

This is the jumbotron html...

      <div class="jumbotron p-5 text-left" fxLayout.lt-md="column" fxLayout.md="column"
  fxLayout.gt-md="column" fxLayoutAlign.gt-md="start left"
  fxLayoutAlign.md="start left" fxLayoutAlign.lt-sm="end left" fxHide.lt-md=""
  alt="female entrepreneur smiling" style="background-image: url('/assets/images/female-entrepreneur-smiling-webdev.webp');
  background-size: cover;">
    <div class="padjumbo">
      <p class="display-5 you">Do what you love.</p>
      <p class="display-6">We'll focus on your website.</p>
    </div>
  </div>

I've tried searching for this problem online, but I've had no luck so far finding a solution. I'm hoping someone here knows a solution or at least can put a name to the problem to help my google searches.

Thank you.

K

Answer 1

Flex-Layout was the issue. Because I was doing server side rendering, I had to add FlexLayoutServerModule https://github.com/angular/flex-layout/wiki/Using-SSR-with-Flex-Layout The link explains what to do. I also added an Angular Material spinner until the website fully loads.