From 301e2c606ac1d9fb34ee580f1c952a13883bb90d Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 11 Feb 2024 20:38:43 +0100
Subject: [PATCH] Revert trend-indicator.component.html

---
 .../trend-indicator.component.html            | 90 ++++++++++---------
 1 file changed, 49 insertions(+), 41 deletions(-)

diff --git a/libs/ui/src/lib/trend-indicator/trend-indicator.component.html b/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
index a86a40beb..81ce57bfc 100644
--- a/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
+++ b/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
@@ -1,42 +1,50 @@
-@if (isLoading) {
-  <ngx-skeleton-loader
-    animation="pulse"
-    appearance="circle"
-    [theme]="{
-      height: '1.8rem',
-      width: '1.8rem'
-    }"
+<ngx-skeleton-loader
+  *ngIf="isLoading; else other"
+  animation="pulse"
+  appearance="circle"
+  [theme]="{
+    height: '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 {
-  @if (marketState === 'closed' && range === '1d') {
-    <ion-icon class="text-muted" name="pause-circle-outline" [size]="size" />
-  } @else {
-    @if (marketState === 'delayed' && range === '1d') {
-      <ion-icon class="text-muted" name="time-outline" [size]="size" />
-    } @else {
-      <ng-container>
-        @if (value <= -0.0005) {
-          <ion-icon
-            class="text-danger"
-            name="arrow-down-circle-outline"
-            [ngClass]="{ 'rotate-45-down': value > -0.01 }"
-            [size]="size"
-          />
-        } @else if (value > -0.0005 && value < 0.0005) {
-          <ion-icon
-            class="text-muted"
-            name="arrow-forward-circle-outline"
-            [size]="size"
-          />
-        } @else {
-          <ion-icon
-            class="text-success"
-            name="arrow-up-circle-outline"
-            [ngClass]="{ 'rotate-45-up': value < 0.01 }"
-            [size]="size"
-          />
-        }
-      </ng-container>
-    }
-  }
-}
+  <ng-template #delayed>
+    <ion-icon
+      *ngIf="marketState === 'delayed' && range === '1d'; else trend"
+      class="text-muted"
+      name="time-outline"
+      [size]="size"
+    />
+  </ng-template>
+  <ng-template #trend>
+    <ng-container>
+      <ion-icon
+        *ngIf="value <= -0.0005"
+        class="text-danger"
+        name="arrow-down-circle-outline"
+        [ngClass]="{ 'rotate-45-down': value > -0.01 }"
+        [size]="size"
+      />
+      <ion-icon
+        *ngIf="value > -0.0005 && value < 0.0005"
+        class="text-muted"
+        name="arrow-forward-circle-outline"
+        [size]="size"
+      />
+      <ion-icon
+        *ngIf="value >= 0.0005"
+        class="text-success"
+        name="arrow-up-circle-outline"
+        [ngClass]="{ 'rotate-45-up': value < 0.01 }"
+        [size]="size"
+      />
+    </ng-container>
+  </ng-template>
+</ng-template>