perf(ui): update loader (#5029)

* perf(ui): update loader

Signed-off-by: Yvonnick Esnault <[email protected]>

Author: yesnault

ui/src/app/shared/status/status.component.ts

@@ -9,9 +9,7 @@ import { PipelineStatus } from 'app/model/pipeline.model';
 })
 export class StatusIconComponent {
     @Input() status: string;
-    @Input() value: string;
     @Input() optional: boolean;
-    @Input() loader = true;
     pipelineStatusEnum = PipelineStatus;
 
     constructor() { }

ui/src/app/shared/status/status.icon.html

@@ -1,10 +1,7 @@
 <div class="status-icon" [ngSwitch]="status">
     <div class="wrapper">
         <ng-container *ngSwitchCase="pipelineStatusEnum.BUILDING">
-            <div *ngIf="loader" class="ui small active inline blue loader">
-                <span class="">{{value}}</span>
-            </div>
-            <i *ngIf="!loader" class="blue circle outline icon"></i>
+            <img id="gifloader" height="24" width="24" src="/assets/images/loader.gif">
         </ng-container>
         <i class="check green icon" *ngSwitchCase="pipelineStatusEnum.SUCCESS"></i>
         <ng-container *ngSwitchCase="pipelineStatusEnum.FAIL">

ui/src/app/shared/status/status.spec.ts

@@ -44,7 +44,7 @@ describe('CDS: Parameter Value Component', () => {
         tick(50);
 
         let compiled = fixture.debugElement.nativeElement;
-        expect(compiled.querySelector('.blue.loader')).toBeTruthy('Building loader not displayed');
+        expect(compiled.querySelector('#gifloader')).toBeTruthy('Building loader not displayed');
     }));
 
     it('should display fail icon', fakeAsync(() => {