feat(lib): lazy url config

Author: ChristopherPHolder

packages/ngx-fast-icon-demo/src/app/app.config.server.ts

@@ -4,18 +4,21 @@ import { readFileSync } from 'node:fs';
 import { mergeApplicationConfig, ApplicationConfig, Injectable } from '@angular/core';
 import { provideServerRendering } from '@angular/platform-server';
 
-import { Observable, of } from 'rxjs';
+import { map, Observable } from 'rxjs';
 
 import { provideFastSVG, SvgLoadStrategy } from '@push-based/ngx-fast-svg';
 
 import { appConfig } from './app.config';
 
 @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);
+  load(url$: Observable<string>): Observable<string> {
+    return url$.pipe(
+      map((url) => {
+        const iconPath = join(process.cwd(), 'packages', 'ngx-fast-icon-demo', 'src', url);
+        return readFileSync(iconPath, 'utf8')
+      })
+    )
   }
 }
 

packages/ngx-fast-icon-demo/src/app/app.config.ts

@@ -14,6 +14,13 @@ import { provideAngularSvgIcon } from 'angular-svg-icon';
 import { provideIonicAngular } from '@ionic/angular/standalone';
 
 import { appRoutes } from './app.routes';
+import { map, Observable, timer } from 'rxjs';
+
+class LoaderStrategy {
+  load(name: string): Observable<string> {
+    return timer(1000).pipe(map(() => `assets/svg-icons/${name}.svg`))
+  };
+}
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -32,7 +39,7 @@ export const appConfig: ApplicationConfig = {
     provideAngularSvgIcon(),
     provideIonicAngular({}),
     provideFastSVG({
-      url: (name: string) => `assets/svg-icons/${name}.svg`,
+      url: (name: string) => timer(10000).pipe(map(() => `assets/svg-icons/${name}.svg`)),
     }),
   ],
 };

packages/ngx-fast-lib/src/lib/fast-svg.component.ts

@@ -4,18 +4,19 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  effect,
   ElementRef,
+  inject,
   Injector,
+  input,
   OnDestroy,
   PLATFORM_ID,
-  Renderer2,
-  effect,
-  inject,
-  input,
-  untracked,
+  Renderer2
 } from '@angular/core';
 import { getZoneUnPatchedApi } from './internal/get-zone-unpatched-api';
 import { SvgRegistry } from './svg-registry.service';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { of, switchMap } from 'rxjs';
 
 /**
  * getZoneUnPatchedApi
@@ -110,6 +111,11 @@ export class FastSvgComponent implements AfterViewInit, OnDestroy {
   width = input<string>('');
   height = input<string>('');
 
+  #url = toSignal(toObservable(this.name).pipe(switchMap((name) => {
+    const url = this.registry.url(name);
+    return typeof url === 'string' ? of(url) : url;
+  })))
+
   // When the browser loaded the svg resource we trigger the caching mechanism
   // re-fetch -> cache-hit -> get SVG -> cache in DOM
   loadedListener = () => {
@@ -142,7 +148,6 @@ export class FastSvgComponent implements AfterViewInit, OnDestroy {
       (onCleanup) => {
         const name = this.name();
 
-        untracked(() => {
           if (!name) {
             throw new Error('svg component needs a name to operate');
           }
@@ -153,32 +158,35 @@ export class FastSvgComponent implements AfterViewInit, OnDestroy {
           if (!this.registry.isSvgCached(name)) {
             /**
               CSR - Browser native lazy loading hack
-        
+
               We use an img element here to leverage the browsers native features:
               - lazy loading (loading="lazy") to only load the svg that are actually visible
               - priority hints to down prioritize the fetch to avoid delaying the LCP
-        
+
               While the SVG is loading we display a fallback SVG.
               After the image is loaded we remove it from the DOM. (IMG load event)
               When the new svg arrives we append it to the template.
-        
+
               Note:
               - the image is styled with display none. this prevents any loading of the resource ever.
               on component bootstrap we decide what we want to do. when we remove display none it performs the browser native behavior
-              - the image has 0 height and with and containment as well as contnet-visibility to reduce any performance impact
-        
-        
+              - the image has 0 height and with and containment as well as content-visibility to reduce any performance impact
+
+
               Edge cases:
               - only resources that are not loaded in the current session of the browser will get lazy loaded (same URL to trigger loading is not possible)
               - already loaded resources will get emitted from the cache immediately, even if loading is set to lazy :o
               - the image needs to have display other than none
             */
-            const i = this.getImg(this.registry.url(name));
-            this.renderer.appendChild(this.element.nativeElement, i);
-
-            // get img
-            img = elem.querySelector('img') as HTMLImageElement;
-            addEventListener(img, 'load', this.loadedListener);
+            const url = this.#url();
+            if (url) {
+              const i = this.getImg(url);
+              this.renderer.appendChild(this.element.nativeElement, i);
+
+              // get img
+              img = elem.querySelector('img') as HTMLImageElement;
+              addEventListener(img, 'load', this.loadedListener);
+            }
           }
 
           // Listen to svg changes
@@ -225,7 +233,6 @@ export class FastSvgComponent implements AfterViewInit, OnDestroy {
               img.removeEventListener('load', this.loadedListener);
             }
           });
-        });
       },
       { injector: this.injector }
     );

packages/ngx-fast-lib/src/lib/token/svg-load.strategy.model.ts

@@ -3,5 +3,5 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export abstract class SvgLoadStrategy {
-  abstract load(url: string): Observable<string>;
+  abstract load(url: string | Observable<string>): Observable<string>;
 }

packages/ngx-fast-lib/src/lib/token/svg-load.strategy.ts

@@ -1,11 +1,11 @@
-import { from, Observable } from 'rxjs';
+import { from, Observable, switchMap } from 'rxjs';
 import { getZoneUnPatchedApi } from '../internal/get-zone-unpatched-api';
 import { SvgLoadStrategy } from "./svg-load.strategy.model";
 
 export class SvgLoadStrategyImpl extends SvgLoadStrategy {
   fetch = getZoneUnPatchedApi('fetch', window as any);
 
-  load(url: string): Observable<string> {
-    return from(fetch(url).then((res) => (!res.ok ? '' : res.text())));
+  load(url$: Observable<string>): Observable<string> {
+    return url$.pipe(switchMap((url) =>from(fetch(url).then((res) => (!res.ok ? '' : res.text())))));
   }
 }

packages/ngx-fast-lib/src/lib/token/svg-options.model.ts

@@ -1,5 +1,7 @@
+import { Observable } from 'rxjs';
+
 export type SvgOptions = {
-  url: (name: string) => string;
+  url: (name: string) => string | Observable<string>;
   defaultSize?: string;
   suspenseSvgString?: string;
 };