htmlcssangularfouc

My page does not load the styles correctly when accessing one of its links in Angular

I have this html page on angular:

<div class="main-page-container">
  <sidebar-your-chef></sidebar-your-chef>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

When any of the app's routes are loaded, the styles at startup do not load and for a moment the sidebar is seen without the CSS styles applied. Why don't the styles load initially?

I don't have a global CSS template; instead, each component has its own CSS.

Solution

  • It could be the following reasons.

    1. Network speed is slow, styles taking time to load.

    2. The CSS is large in size so it takes time to download.

    3. You might face this issue only on the DEV server, unless it happens in prod it is not an issue.

    Possible Solutions:

    1. Enable brotli or gzip to compress your website files, which will greatly reduce transfer size and improve loading speeds.

    1. The simple workaround for this, in your app component you can show a loader screen for 1 second to eliminate the flash of no CSS.

       @defer() {}@placeholder(minimum 1s) {
     <app-overlay-spinner/>
 }

    This is a small snippet to show a spinner for 1 second, I know this is not a direct use case of @placeholder but is a minimal code version to show a spinner for 1 second and then it is gone permanently.