From c2cda2bb50b54f948ae30b548fbd7b6e87b0243a Mon Sep 17 00:00:00 2001
From: Elena Zioga <elena@arrikto.com>
Date: Wed, 14 Dec 2022 12:54:29 +0200
Subject: [PATCH] web-apps(front): Add text bellow the spinner component
 (kubeflow/kubeflow#6844)

Extend spinner component by adding some text below the spinner in order
to inform users why we're spinning about.

Signed-off-by: Elena Zioga <elena@arrikto.com>

Signed-off-by: Elena Zioga <elena@arrikto.com>
---
 .../src/lib/loading-spinner/loading-spinner.component.html    | 1 +
 .../src/lib/loading-spinner/loading-spinner.component.scss    | 4 ++++
 .../src/lib/loading-spinner/loading-spinner.component.ts      | 2 ++
 3 files changed, 7 insertions(+)

diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.html b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.html
index 02e72196..1395d37f 100644
--- a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.html
+++ b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.html
@@ -1,3 +1,4 @@
 <div class="spinner-wrapper" #spinnerWrapper [ngStyle]="{ height: height }">
   <mat-spinner *ngIf="initialized" [diameter]="diameter"></mat-spinner>
+  <div *ngIf="message" class="spinner-message">{{ message }}</div>
 </div>
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.scss b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.scss
index e443e197..d1129a79 100644
--- a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.scss
+++ b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.scss
@@ -4,3 +4,7 @@
   justify-content: center;
   align-items: center;
 }
+
+.spinner-message {
+  color: grey;
+}
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.ts b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.ts
index e5219b6d..714e623e 100644
--- a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.ts
+++ b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.ts
@@ -14,6 +14,8 @@ import {
 })
 export class LoadingSpinnerComponent implements AfterViewInit {
   @Input() diameter = 32;
+  @Input()
+  message: string;
   @ViewChild('spinnerWrapper')
   wrapper: ElementRef;