@truenas/ui-components 0.7.12 → 0.7.14

package/fesm2022/truenas-ui-components.mjs

@@ -3746,8 +3746,22 @@ const defaultSpriteConfigPath = `${defaultSpriteBasePath}/sprite-config.json`;
  */
 class TnSpriteLoaderService {
     spriteConfig;
-    spriteLoaded = false;
     spriteLoadPromise;
+    /**
+     * A signal rather than a plain field, because the fetch below starts from the
+     * constructor and lands whenever it lands: anything that resolves an icon
+     * before it does gets a miss, and needs to be told when to ask again (#341).
+     */
+    spriteLoadedState = signal(false, ...(ngDevMode ? [{ debugName: "spriteLoadedState" }] : []));
+    /**
+     * Whether the sprite config has loaded, as a signal — read it inside a
+     * `computed`/`effect` to re-resolve when the sprite arrives.
+     *
+     * `isSpriteLoaded()` reads the same state, so a caller that just wants the
+     * current value needs nothing from here; this is for a caller that wants to
+     * react to it changing.
+     */
+    spriteLoaded = this.spriteLoadedState.asReadonly();
     http = inject(HttpClient);
     sanitizer = inject(DomSanitizer);
     constructor() {
@@ -3764,8 +3778,10 @@ class TnSpriteLoaderService {
         this.spriteLoadPromise = (async () => {
             try {
                 const config = await firstValueFrom(this.http.get(defaultSpriteConfigPath));
+                // Config first, then the flag: a reader woken by the signal below goes
+                // straight to `getIconUrl`, which needs the config already there.
                 this.spriteConfig = config;
-                this.spriteLoaded = true;
+                this.spriteLoadedState.set(true);
             }
             catch (error) {
                 console.error('[TnSpriteLoader] Failed to load sprite config. Icons may not work:', error);
@@ -3778,7 +3794,7 @@ class TnSpriteLoaderService {
      */
     async ensureSpriteLoaded() {
         await this.loadSpriteConfig();
-        return this.spriteLoaded;
+        return this.spriteLoadedState();
     }
     /**
      * Get the full URL for an icon in the sprite
@@ -3815,10 +3831,14 @@ class TnSpriteLoaderService {
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
     /**
-     * Check if the sprite is loaded
+     * Check if the sprite is loaded.
+     *
+     * Reads the `spriteLoaded` signal, so a call made from inside a `computed` or
+     * an `effect` is tracked and that consumer re-runs when the sprite arrives —
+     * which is how an icon resolved too early gets a second chance (#341).
      */
     isSpriteLoaded() {
-        return this.spriteLoaded;
+        return this.spriteLoadedState();
     }
     /**
      * Get the sprite config if loaded