Revert trend-indicator.component.html

libs/ui/src/lib/trend-indicator/trend-indicator.component.html

@@ -1,42 +1,50 @@
-@if (isLoading) {
+<ngx-skeleton-loader
-  <ngx-skeleton-loader
+  *ngIf="isLoading; else other"
-    animation="pulse"
+  animation="pulse"
-    appearance="circle"
+  appearance="circle"
-    [theme]="{
+  [theme]="{
-      height: '1.8rem',
+    height: '1.8rem',
-      width: '1.8rem'
+    width: '1.8rem'
-    }"
+  }"
+/>
+
+<ng-template #other>
+  <ion-icon
+    *ngIf="marketState === 'closed' && range === '1d'; else delayed"
+    class="text-muted"
+    name="pause-circle-outline"
+    [size]="size"
   />
-} @else {
+  <ng-template #delayed>
-  @if (marketState === 'closed' && range === '1d') {
+    <ion-icon
-    <ion-icon class="text-muted" name="pause-circle-outline" [size]="size" />
+      *ngIf="marketState === 'delayed' && range === '1d'; else trend"
-  } @else {
+      class="text-muted"
-    @if (marketState === 'delayed' && range === '1d') {
+      name="time-outline"
-      <ion-icon class="text-muted" name="time-outline" [size]="size" />
+      [size]="size"
-    } @else {
+    />
-      <ng-container>
+  </ng-template>
-        @if (value <= -0.0005) {
+  <ng-template #trend>
-          <ion-icon
+    <ng-container>
-            class="text-danger"
+      <ion-icon
-            name="arrow-down-circle-outline"
+        *ngIf="value <= -0.0005"
-            [ngClass]="{ 'rotate-45-down': value > -0.01 }"
+        class="text-danger"
-            [size]="size"
+        name="arrow-down-circle-outline"
-          />
+        [ngClass]="{ 'rotate-45-down': value > -0.01 }"
-        } @else if (value > -0.0005 && value < 0.0005) {
+        [size]="size"
-          <ion-icon
+      />
-            class="text-muted"
+      <ion-icon
-            name="arrow-forward-circle-outline"
+        *ngIf="value > -0.0005 && value < 0.0005"
-            [size]="size"
+        class="text-muted"
-          />
+        name="arrow-forward-circle-outline"
-        } @else {
+        [size]="size"
-          <ion-icon
+      />
-            class="text-success"
+      <ion-icon
-            name="arrow-up-circle-outline"
+        *ngIf="value >= 0.0005"
-            [ngClass]="{ 'rotate-45-up': value < 0.01 }"
+        class="text-success"
-            [size]="size"
+        name="arrow-up-circle-outline"
-          />
+        [ngClass]="{ 'rotate-45-up': value < 0.01 }"
-        }
+        [size]="size"
-      </ng-container>
+      />
-    }
+    </ng-container>
-  }
+  </ng-template>
-}
+</ng-template>