Fixed FOUC (#166)

* Added style loader to runtime

* Added style loader to runtime

* Created typescript module

* Added types

* Added space in attribute

* Reduced timeout

* Added unit tests

* Fixed linting error

* Updated skyux version

* Updated to injectable

* Implemented zones

* Removed zones

* Changed name of ready class

* Returning a resolved promise

* Made result optional

Author: Blackbaud-SteveBrush

lib/sky-pages-module-generator.js

@@ -30,11 +30,13 @@ function getSource(skyAppConfig) {
     'SkyAppBootstrapper',
     'SkyAppConfig',
     'SkyAppWindowRef',
+    'SkyAppStyleLoader',
     'SkyAuthTokenProvider'
   ];
 
   let runtimeProviders = [
     'SkyAppWindowRef',
+    'SkyAppStyleLoader',
     'SkyAuthTokenProvider',
     `{
       provide: SkyAppConfig,

package.json

@@ -42,6 +42,7 @@
     "@blackbaud/auth-client": "1.6.0",
     "@blackbaud/help-client": "1.0.1",
     "@ngtools/webpack": "1.2.14",
+    "@types/fontfaceobserver": "0.0.5",
     "@types/jasmine": "2.5.40",
     "@types/node": "7.0.14",
     "angular2-template-loader": "0.5.0",

runtime/index.ts

@@ -4,3 +4,4 @@ export * from './bootstrapper';
 export * from './config';
 export * from './search-results-provider';
 export * from './window-ref';
+export * from './style-loader';

runtime/style-loader.spec.ts

@@ -0,0 +1,50 @@
+/* tslint:disable:no-console */
+
+import { SkyAppStyleLoader } from './style-loader';
+import * as FontFaceObserver from 'fontfaceobserver';
+
+describe('Style loader', () => {
+  it('should resolve a promise after loading fonts', (done) => {
+    spyOn(FontFaceObserver.prototype, 'load').and.returnValue(
+      Promise.resolve()
+    );
+
+    const styleLoader = new SkyAppStyleLoader();
+
+    styleLoader.loadStyles()
+      .then(() => {
+        expect(styleLoader.isLoaded).toBe(true);
+        done();
+      });
+  });
+
+  it('should pass errors to the resolve', (done) => {
+    spyOn(Promise, 'all').and.callFake(() => {
+      return Promise.reject(new Error('Fonts not loaded.'));
+    });
+
+    const styleLoader = new SkyAppStyleLoader();
+
+    styleLoader.loadStyles()
+      .then((response) => {
+        expect(response.error.message).toBe('Fonts not loaded.');
+        done();
+      });
+  });
+
+  it('should resolve the promise if the fonts are not loaded within the timeout', (done) => {
+    const sampleObserver = new FontFaceObserver('SampleFont');
+
+    spyOn(Promise, 'all').and.callFake(() => {
+      return sampleObserver.load(undefined, 1);
+    });
+
+    const styleLoader = new SkyAppStyleLoader();
+
+    styleLoader.loadStyles()
+      .then((result) => {
+        expect(result.error).toBeDefined();
+        done();
+      });
+  });
+});

runtime/style-loader.ts

@@ -0,0 +1,35 @@
+import * as FontFaceObserver from 'fontfaceobserver';
+
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class SkyAppStyleLoader {
+  public static readonly LOAD_TIMEOUT: number = 3000;
+  public isLoaded: boolean = false;
+
+  public loadStyles(): Promise<any> {
+    const fontAwesome = new FontFaceObserver('FontAwesome');
+    const openSans = new FontFaceObserver('Open Sans');
+    const oswald = new FontFaceObserver('Oswald');
+
+    return Promise
+      .all([
+        // Specify a character for FontAwesome since some browsers will fail to detect
+        // when the font is loaded unless a known character with a different width
+        // than the default is not specified.
+        fontAwesome.load('\uf0fc', SkyAppStyleLoader.LOAD_TIMEOUT),
+        openSans.load(undefined, SkyAppStyleLoader.LOAD_TIMEOUT),
+        oswald.load(undefined, SkyAppStyleLoader.LOAD_TIMEOUT)
+      ])
+      .then(() => {
+        this.isLoaded = true;
+      })
+      .catch((error) => {
+        // Errors loading the font should not stop the page from rendering.
+        // Passing the error along in case the client wants to do something with it.
+        return Promise.resolve({
+          error: error
+        });
+      });
+  }
+}

src/app/app.component.html

@@ -1 +1,4 @@
-<router-outlet></router-outlet>
+<div [ngClass]="{ 'skyux-app-loading': !isReady }">
+  <router-outlet>
+  </router-outlet>
+</div>

src/app/app.component.scss

@@ -0,0 +1,3 @@
+.skyux-app-loading {
+  visibility: hidden;
+}

src/app/app.component.ts

@@ -25,7 +25,8 @@ import { BBHelp } from '@blackbaud/help-client';
 import {
   SkyAppConfig,
   SkyAppSearchResultsProvider,
-  SkyAppWindowRef
+  SkyAppWindowRef,
+  SkyAppStyleLoader
 } from '@blackbaud/skyux-builder/runtime';
 
 require('style-loader!@blackbaud/skyux/dist/css/sky.css');
@@ -70,12 +71,24 @@ function fixUpNav(nav: any, baseUrl: string) {
   templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit {
+  public isReady = false;
+
   constructor(
     private router: Router,
     private windowRef: SkyAppWindowRef,
     private config: SkyAppConfig,
+    private styleLoader: SkyAppStyleLoader,
     @Optional() private searchProvider?: SkyAppSearchResultsProvider
-  ) { }
+  ) {
+    this.styleLoader.loadStyles()
+      .then((result?: any) => {
+        this.isReady = true;
+
+        if (result && result.error) {
+          console.log(result.error.message);
+        }
+      });
+  }
 
   public ngOnInit() {
     // Without this code, navigating to a new route doesn't cause the window to be