Improve indicator for delayed market data

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -1,19 +1,15 @@
 <div class="container p-0">
   <div class="no-gutters row">
-    <div
-      class="flex-grow-1 status text-muted text-right"
-      [title]="
-        errors?.length > 0 && !isLoading
-          ? 'Sorry! Our data provider partner is experiencing the hiccups.'
-          : ''
-      "
-      (click)="errors?.length > 0 && onShowErrors()"
-    >
-      <ion-icon
-        *ngIf="errors?.length > 0 && !isLoading"
-        name="alert-circle-outline"
-      />
-    </div>
+    @if (errors?.length > 0 && !isLoading) {
+      <div
+        class="flex-grow-1 status text-muted text-right"
+        i18n-title
+        title="Oops! Our data provider partner is experiencing the hiccups."
+        (click)="onShowErrors()"
+      >
+        <ion-icon name="time-outline" />
+      </div>
+    }
     <div *ngIf="isLoading" class="align-items-center d-flex">
       <ngx-skeleton-loader
         animation="pulse"

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

@@ -74,7 +74,7 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
   }
 
   public onShowErrors() {
-    const errorMessageParts = ['Data Provider Errors for'];
+    const errorMessageParts = [$localize`Market data is delayed for`];
 
     for (const error of this.errors) {
       errorMessageParts.push(`${error.symbol} (${error.dataSource})`);