CODEWITHSUNDEEP
angularangular-cli
atsituab
atsituab

Reputation: 637

Styles loading after angular application loads with CLI

I just started porting my existing angular application to use the cli now that it has been released. However I noticed the styles are loading after my application starts loading. During application loading I display a loading gif which I center in the page. What is happening now is that it appears in the top left of the page for a split second then the styles are loaded centering the the gif then loads the application.

Is there any way to mimic the behavior as if I had a link tag at the top of my html page loading the css? Right now it bundles my styles in a js file and is loaded at the bottom of the body tag causing the delay.

My .angular-cli.json is below:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "program-quick-view-cli"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "assets/styles/main.scss"
      ],
      "scripts": [
        "assets/js/pdfmake.min.js",
        "assets/js/Treant.js",
        "assets/js/vfs_fonts.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

Upvotes: 1

Views: 2581

Answers (1)

Steve G
Steve G

Reputation: 13357

If you want a super snappy load of your "loading page", I would suggest injecting/embedding just the styles for your loading page directly in your index.html, so you don't get FOUC (Flash of Unstyled Content) at any point of the loading process. In fact, you can even embed your loading graphic in the CSS so that doesn't need the additional request.

For example (using an SVG):

<html>
<head>
    <!-- ... -->
    <style>
        @keyframes knock-their-socks-off {
            /*  ... */
        }

        .cool-loader {
            /*  ... */
            animation: knock-their-socks-off 10s infinite;
            background-image: url("data:image/svg+xml;utf8,<svg ...");
            /*  ... */
        }
    </style>
    <!-- ... -->
</head>
<body>
    <!-- ... -->
    <app-root>
        <div class="cool-loader"></div>
    </app-root>
    <link rel="stylesheet" href="/rest-of-site.css" ...>
    <!-- ... -->
</body>
</html>

If you're using a GIF, you can Base64 encode it for embedding. Just be wary that the larger the file, the more it will inflate your index.html.

Upvotes: 2

Related Questions