From ca20ceb72a404504d465241ef539be9b266e8084 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 5 Aug 2026 08:12:55 +0200
Subject: [PATCH] Introduce isLoading attribute

---
 libs/ui/src/lib/value/value.component.html    | 22 +++++++++----------
 .../src/lib/value/value.component.stories.ts  |  5 ++++-
 libs/ui/src/lib/value/value.component.ts      |  4 ++--
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 14ac7154a..19b72c177 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -27,7 +27,16 @@
     }
   </ng-template>
 
-  @if (value || value === 0 || value === null) {
+  @if (isLoading() || value === undefined) {
+    <ngx-skeleton-loader
+      animation="pulse"
+      [theme]="{
+        height:
+          size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
+        width: '5rem'
+      }"
+    />
+  } @else if (value || value === 0 || value === null) {
     <div
       class="align-items-center d-flex"
       [class.justify-content-end]="position === 'end'"
@@ -75,17 +84,6 @@
     </div>
   }
 
-  @if (value === undefined) {
-    <ngx-skeleton-loader
-      animation="pulse"
-      [theme]="{
-        height:
-          size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
-        width: '5rem'
-      }"
-    />
-  }
-
   @if (size === 'large') {
     <div class="text-truncate">
       <span class="h6"><ng-container *ngTemplateOutlet="label" /></span>
diff --git a/libs/ui/src/lib/value/value.component.stories.ts b/libs/ui/src/lib/value/value.component.stories.ts
index a5971b252..19139e266 100644
--- a/libs/ui/src/lib/value/value.component.stories.ts
+++ b/libs/ui/src/lib/value/value.component.stories.ts
@@ -30,6 +30,9 @@ export default {
     enableCopyToClipboardButton: {
       control: 'boolean'
     },
+    isLoading: {
+      control: 'boolean'
+    },
     size: {
       control: 'select',
       options: ['small', 'medium', 'large']
@@ -41,7 +44,7 @@ type Story = StoryObj<GfValueComponent>;
 
 export const Loading: Story = {
   args: {
-    value: undefined
+    isLoading: true
   }
 };
 
diff --git a/libs/ui/src/lib/value/value.component.ts b/libs/ui/src/lib/value/value.component.ts
index 494f7a347..cc08e5a24 100644
--- a/libs/ui/src/lib/value/value.component.ts
+++ b/libs/ui/src/lib/value/value.component.ts
@@ -62,6 +62,8 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   public readonly copiedTitle = $localize`The value has been copied to the clipboard`;
   public readonly copyToClipboardTitle = $localize`Copy to clipboard`;
+  public readonly isLoading = input<boolean>(false);
+  public readonly precision = input<number>();
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
@@ -74,8 +76,6 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
     });
   }
 
-  public readonly precision = input<number>();
-
   private copyToClipboardTimeout: ReturnType<typeof setTimeout>;
 
   private readonly formatOptions = computed<Intl.NumberFormatOptions>(() => {