Introduce isLoading attribute

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>

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
   }
 };
 

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>(() => {