kubeflow
/
notebooks
mirror of https://github.com/kubeflow/notebooks.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Elena Zioga 2022-12-14 12:54:29 +02:00 committed by GitHub
parent 0e3834305f
commit c2cda2bb50
3 changed files with 7 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.html
View File

@ -1,3 +1,4 @@
<div class="spinner-wrapper" #spinnerWrapper [ngStyle]="{ height: height }"> <div class="spinner-wrapper" #spinnerWrapper [ngStyle]="{ height: height }">
<mat-spinner *ngIf="initialized" [diameter]="diameter"></mat-spinner> <mat-spinner *ngIf="initialized" [diameter]="diameter"></mat-spinner>
<div *ngIf="message" class="spinner-message">{{ message }}</div>
</div> </div>

4
components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.scss
View File

@ -4,3 +4,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.spinner-message {
color: grey;
}

2
components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/loading-spinner/loading-spinner.component.ts
View File

@ -14,6 +14,8 @@ import {
}) })
export class LoadingSpinnerComponent implements AfterViewInit { export class LoadingSpinnerComponent implements AfterViewInit {
@Input() diameter = 32; @Input() diameter = 32;
@Input()
message: string;
@ViewChild('spinnerWrapper') @ViewChild('spinnerWrapper')
wrapper: ElementRef; wrapper: ElementRef;