docs: fix material flicker

push-based · Feb 9, 2024 · 7ccdb40 · 7ccdb40
2 parents 20cd377 + 959266f
commit 7ccdb40
Show file tree

Hide file tree

Showing 16 changed files with 139 additions and 292 deletions.
diff --git a/packages/ngx-fast-icon-demo/project.json b/packages/ngx-fast-icon-demo/project.json
@@ -23,9 +23,6 @@
           "packages/ngx-fast-icon-demo/src/favicon.ico",
           "packages/ngx-fast-icon-demo/src/assets"
         ],
-        "styles": [
-          "packages/ngx-fast-icon-demo/src/styles.scss"
-        ],
         "scripts": [],
         "server": "packages/ngx-fast-icon-demo/src/main.server.ts",
         "prerender": true,

diff --git a/packages/ngx-fast-icon-demo/src/app/app.component.ts b/packages/ngx-fast-icon-demo/src/app/app.component.ts
@@ -1,10 +1,10 @@
-import { Component, inject } from '@angular/core';
+import {Component, inject, PLATFORM_ID} from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 
-import { filter, map } from 'rxjs';
+import {filter, map, Observable, startWith} from 'rxjs';
 import {MediaMatcher} from '@angular/cdk/layout';
-import { ShellComponent } from './misc/shell.component';
-import { AsyncPipe } from '@angular/common';
+import {ShellComponent} from './misc/shell.component';
+import {AsyncPipe, isPlatformServer} from '@angular/common';
 
 @Component({
   selector: 'ngx-fast-icon-root',
@@ -28,13 +28,18 @@ import { AsyncPipe } from '@angular/common';
 export class AppComponent {
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
+  private readonly _PLATFORM_ID = inject(PLATFORM_ID);
 
   readonly queryParams$ = this.route.queryParams;
   readonly isMobile = inject(MediaMatcher).matchMedia('(max-width: 600px)').matches;
-  readonly rootClass$ = this.router.events.pipe(
+  private readonly navUrl$: Observable<string> = this.router.events.pipe(
     filter((e): e is NavigationEnd => e instanceof NavigationEnd),
-    map((e) => e.urlAfterRedirects.split('?')[0].replace('/', ''))
+    map((e) => e.urlAfterRedirects),
   )
+  readonly rootClass$ = this.navUrl$.pipe(
+    startWith(isPlatformServer(this._PLATFORM_ID) ? '' : window.location.pathname),
+    map((pathname) => pathname.split('?')[0].replace('/', ' ')),
+  );
 
   readonly links = [
     'description',

diff --git a/packages/ngx-fast-icon-demo/src/app/app.config.server.ts b/packages/ngx-fast-icon-demo/src/app/app.config.server.ts
@@ -1,8 +1,23 @@
-import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { join } from 'node:path';
+import { readFileSync } from 'node:fs';
+
+import { mergeApplicationConfig, ApplicationConfig, Injectable } from '@angular/core';
 import { provideServerRendering } from '@angular/platform-server';
+
+import { Observable, of } from 'rxjs';
+
+import { provideFastSVG, SvgLoadStrategy } from '@push-based/ngx-fast-svg';
+
 import { appConfig } from './app.config';
-import { SvgLoadStrategySsr } from './ngx-fast-icon-ssr/icon-load.ssr.strategy';
-import { provideFastSVG } from '@push-based/ngx-fast-svg';
+
+@Injectable()
+export class SvgLoadStrategySsr implements SvgLoadStrategy {
+  load(url: string): Observable<string> {
+    const iconPath = join(process.cwd(), 'packages', 'ngx-fast-icon-demo', 'src', url);
+    const iconSVG = readFileSync(iconPath, 'utf8')
+    return of(iconSVG);
+  }
+}
 
 const serverConfig: ApplicationConfig = {
   providers: [

diff --git a/packages/ngx-fast-icon-demo/src/app/app.module.ts b/packages/ngx-fast-icon-demo/src/app/app.module.ts
diff --git a/packages/ngx-fast-icon-demo/src/app/comparison/angular.component.ts b/packages/ngx-fast-icon-demo/src/app/comparison/angular.component.ts
@@ -1,44 +1,31 @@
-import { Component } from '@angular/core';
-import { SUPPORTED_ICONS } from '../icon-data';
-import { IconTester } from '../misc/icon-tester.service';
-import { ControllerComponent } from '../misc/controller.component';
-import { AsyncPipe, NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+
 import { SvgIconComponent } from 'angular-svg-icon';
-import { FastSvgComponent } from '@push-based/ngx-fast-svg';
+
+import { ControllerComponent } from '../misc/controller.component';
+import { IconTester } from '../misc/icon-tester.service';
+import { SUPPORTED_ICONS } from '../misc/icon-data';
 
 @Component({
   standalone: true,
   template: `
     <app-controller [demoLib]='"Angular svg icon"' [tester]='tester' />
-    <div class='row icons' [ngClass]='tester.layout | async'>
+    <div class='row icons' [class]='tester.layout | async'>
       @for (list of (tester.lists | async); track $index) {
         <ul class='group'>
           @for (icon of list; track $index) {
             <li>
-              <svg-icon
-                [src]='icon'
-                [svgStyle]="{ 'width.px': 30, 'height.px': 30 }"
-              />
+              <svg-icon [src]='icon' [svgStyle]="{ 'width.px': 30, 'height.px': 30 }" />
             </li>
           }
         </ul>
       }
     </div>
   `,
-  styles: [`
-    .group {
-      list-style: none;
-      display: flex;
-      flex-wrap: wrap;
-    }
-  `],
-  imports: [
-    ControllerComponent,
-    AsyncPipe,
-    NgClass,
-    SvgIconComponent,
-    FastSvgComponent
-  ]
+  imports: [AsyncPipe, ControllerComponent, SvgIconComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class AngularComponent {
   constructor(public tester: IconTester) {