Search code examples
cssangularstartup

Creating a Pre-Bootstrap loading page in Angular 7

I want to show a pre-bootstrap loading page before my angular app starts rendering.

I added this code in index.html. However, I noticed that for one second or so, the loading message is displayed with no style formatting. After that, it displays with the applied styles, causing a jitter experience.

Is there a way to show the loading screen with style until the app has loaded avoiding jitters?

index.html

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>My Application</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <style>
    .loading-page {
        background: #fff;
        height: 100vh;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
    }

    .loading-box {
        width: 30vw;
        margin: 12% auto;
    }

    .loading-box-body {
        background: #fff;
        padding: 0px;
        border-top: 0;
        color: #666;
    }

    .loading-box-msg {
        font-size: 20px;
        text-align: center;
    }
  </style>
</head>
<body>
  <app-root>
      <div class="loading-page">
          <div class="loading-box">
              <div class="loading-box-body">
                  <p class="loading-box-msg">Loading application. Please wait..</p>
              </div>
          </div>
      </div>
  </app-root>
</body>
</html>

I would like the experience to work like this.

Solution

  • I think it is unavoidable. Browsers load your text using the default style and then apply your CSS. Instead of text, you can choose to load an svg with text. I believe that can be a workaround.

    You can look up FOUT(Flash of Unstyled Text) or FOIT(Flash of Invisible Text) for more information.

    From wikipedia

    A flash of unstyled content (FOUC, also flash of unstyled text)1[2] is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift may be distracting. Related problems include flash of invisible text (FOIT) and flash of faux text (FOFT).