perf: add preload link for stylesheet

src/app/core/utils/theme/theme.service.ts

@@ -1,7 +1,7 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { DOCUMENT, isPlatformServer } from '@angular/common';
+import { Inject, Injectable, PLATFORM_ID, Renderer2, RendererFactory2, isDevMode } from '@angular/core';
 import { Store, select } from '@ngrx/store';
-import { distinctUntilChanged, filter } from 'rxjs/operators';
+import { distinctUntilChanged, filter, takeWhile } from 'rxjs/operators';
 
 import { getTheme } from 'ish-core/store/core/configuration';
 
@@ -16,11 +16,13 @@ export class ThemeService {
   private renderer: Renderer2;
   private head: HTMLElement;
   private themeLinks: HTMLElement[] = [];
+  private themePreloadLinks: HTMLElement[] = [];
 
   constructor(
     private rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) private document: Document,
-    private store: Store
+    private store: Store,
+    @Inject(PLATFORM_ID) private platformId: string
   ) {
     this.head = this.document.head;
     this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
@@ -35,8 +37,9 @@ export class ThemeService {
 
   init() {
     this.store
-      .pipe(select(getTheme))
       .pipe(
+        takeWhile(() => isPlatformServer(this.platformId) || isDevMode()),
+        select(getTheme),
         distinctUntilChanged(),
         filter(x => !!x)
       )
@@ -74,14 +77,26 @@ export class ThemeService {
   }
 
   private async loadCss(filename: string) {
+    const themePreloadLinkEl: HTMLElement = this.renderer.createElement('link');
+    this.renderer.setAttribute(themePreloadLinkEl, 'rel', 'preload');
+    this.renderer.setAttribute(themePreloadLinkEl, 'as', 'style');
+    this.renderer.setAttribute(themePreloadLinkEl, 'href', filename);
+    this.renderer.appendChild(this.head, themePreloadLinkEl);
+    this.themePreloadLinks = [...this.themePreloadLinks, themePreloadLinkEl];
+
+    // remove style of previous theme
+    if (this.themePreloadLinks.length === 2) {
+      this.renderer.removeChild(this.head, this.themePreloadLinks.shift());
+    }
+
     return new Promise(resolve => {
-      const linkEl: HTMLElement = this.renderer.createElement('link');
-      this.renderer.setAttribute(linkEl, 'rel', 'stylesheet');
-      this.renderer.setAttribute(linkEl, 'type', 'text/css');
-      this.renderer.setAttribute(linkEl, 'href', filename);
-      this.renderer.setProperty(linkEl, 'onload', resolve);
-      this.renderer.appendChild(this.head, linkEl);
-      this.themeLinks = [...this.themeLinks, linkEl];
+      const themeLinkEl: HTMLElement = this.renderer.createElement('link');
+      this.renderer.setAttribute(themeLinkEl, 'rel', 'stylesheet');
+      this.renderer.setAttribute(themeLinkEl, 'type', 'text/css');
+      this.renderer.setAttribute(themeLinkEl, 'href', filename);
+      this.renderer.setProperty(themeLinkEl, 'onload', resolve);
+      this.renderer.appendChild(this.head, themeLinkEl);
+      this.themeLinks = [...this.themeLinks, themeLinkEl];
 
       // remove style of previous theme
       if (this.themeLinks.length === 2) {