fix(loading): trata o ícone de carregamento para conexões 3g

Samir Hassan Ayoub · Samir Hassan Ayoub · commit ea3ba0acf1d8 · 2019-07-18T16:39:50.000-03:00
Em conexões 3g foi detectada uma lentidão no carregamento do ícone de carregamento de conteúdo. O problema foi solucionado com a construção da animação com recursos HTML e CSS. A solução também torna possível a customização de cor para o ícone.

Fixes DTHFUI-796
diff --git a/projects/ui/src/lib/components/po-button-group/po-button-group.component.spec.ts b/projects/ui/src/lib/components/po-button-group/po-button-group.component.spec.ts
@@ -2,7 +2,8 @@ import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testi
 
 import { configureTestSuite } from './../../util-test/util-expect.spec';
 
-import { PoButtonComponent } from './../po-button/po-button.component';
+import { PoButtonModule } from '../po-button/po-button.module';
+
 import { PoButtonGroupBaseComponent } from './po-button-group-base.component';
 import { PoButtonGroupComponent } from './po-button-group.component';
 import { PoButtonGroupItem } from './po-button-group-item.interface';
@@ -32,9 +33,8 @@ describe('PoButtonGroupComponent:', () => {
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
-      imports: [PoTooltipModule],
+      imports: [ PoButtonModule, PoTooltipModule ],
       declarations: [
-        PoButtonComponent,
         PoButtonGroupComponent
       ]
     });
diff --git a/projects/ui/src/lib/components/po-button/po-button.component.html b/projects/ui/src/lib/components/po-button/po-button.component.html
@@ -9,7 +9,9 @@
   [disabled]="disabled || loading"
   (click)="onClick()">
 
-  <span *ngIf="loading" class="po-icon po-button-loading-icon"></span>
+  <div *ngIf="loading" class="po-button-loading-icon">
+    <po-loading-icon p-neutral-color></po-loading-icon>
+  </div>
   <span *ngIf="icon" class="po-icon {{ icon }}" aria-hidden="true"></span>
   <span *ngIf="label" class="po-button-label">{{ label }}</span>
 </button>
diff --git a/projects/ui/src/lib/components/po-button/po-button.component.spec.ts b/projects/ui/src/lib/components/po-button/po-button.component.spec.ts
@@ -2,6 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { configureTestSuite } from './../../util-test/util-expect.spec';
 
+import { PoLoadingModule } from '../po-loading';
+
 import { PoButtonComponent } from './po-button.component';
 import { PoButtonBaseComponent } from './po-button-base.component';
 
@@ -15,6 +17,7 @@ describe('PoButtonComponent: ', () => {
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
+      imports: [PoLoadingModule],
       declarations: [ PoButtonComponent ]
     });
   });
@@ -140,7 +143,7 @@ describe('PoButtonComponent: ', () => {
 
       it('should disabled button when propertie is setted.', () => {
         expect(button.getAttribute('disabled')).not.toBeNull();
-        expect(button.getElementsByClassName('po-icon po-button-loading-icon').length).toBeTruthy();
+        expect(button.getElementsByClassName('po-button-loading-icon').length).toBeTruthy();
       });
 
       it('should keep button disabled independently of type.', () => {
@@ -150,7 +153,7 @@ describe('PoButtonComponent: ', () => {
           component.type = type;
           fixture.detectChanges();
           expect(button.getAttribute('disabled')).not.toBeNull();
-          expect(button.getElementsByClassName('po-icon po-button-loading-icon').length).toBeTruthy();
+          expect(button.getElementsByClassName('po-button-loading-icon').length).toBeTruthy();
         }
       });
 
diff --git a/projects/ui/src/lib/components/po-button/po-button.module.ts b/projects/ui/src/lib/components/po-button/po-button.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { PoLoadingModule } from './../po-loading/index';
+
 import { PoButtonComponent } from './po-button.component';
 
 /**
@@ -10,7 +12,8 @@ import { PoButtonComponent } from './po-button.component';
  */
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    PoLoadingModule
   ],
   declarations: [
     PoButtonComponent
diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.spec.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.spec.ts
@@ -8,9 +8,11 @@ import { changeBrowserInnerWidth, configureTestSuite } from './../../../util-tes
 
 import * as UtilsFunctions from '../../../utils/util';
 import { removeDuplicatedOptions } from '../../../utils/util';
+
+import { PoLoadingModule } from '../../po-loading/po-loading.module';
+
 import { PoFieldContainerBottomComponent } from './../po-field-container/po-field-container-bottom/po-field-container-bottom.component';
 import { PoFieldContainerComponent } from '../po-field-container/po-field-container.component';
-import { PoLoadingComponent } from '../../po-loading/po-loading.component';
 
 import { PoComboComponent } from './po-combo.component';
 import { PoComboFilterMode } from './po-combo-filter-mode.enum';
@@ -31,10 +33,10 @@ describe('PoComboComponent:', () => {
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
+      imports: [ PoLoadingModule ],
       declarations: [
         PoComboComponent,
         PoFieldContainerComponent,
-        PoLoadingComponent,
         PoFieldContainerBottomComponent
       ],
       providers: [ HttpClient, HttpHandler]
@@ -1425,11 +1427,11 @@ describe('PoComboComponent - with service:', () => {
   configureTestSuite(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientTestingModule
+        HttpClientTestingModule,
+        PoLoadingModule
       ],
       declarations: [ PoComboComponent,
         PoFieldContainerComponent,
-        PoLoadingComponent,
         PoFieldContainerBottomComponent
       ],
       providers: [ HttpClient, HttpHandler, PoComboFilterService]
diff --git a/projects/ui/src/lib/components/po-field/po-upload/po-upload.component.spec.ts b/projects/ui/src/lib/components/po-field/po-upload/po-upload.component.spec.ts
@@ -5,7 +5,7 @@ import { HttpClient, HttpHandler } from '@angular/common/http';
 
 import { configureTestSuite } from './../../../util-test/util-expect.spec';
 
-import { PoButtonComponent } from '../../po-button/po-button.component';
+import { PoButtonModule } from '../../po-button';
 
 import { PoFieldContainerBottomComponent } from './../po-field-container/po-field-container-bottom/po-field-container-bottom.component';
 import { PoFieldContainerComponent } from '../po-field-container/po-field-container.component';
@@ -30,10 +30,10 @@ describe('PoUploadComponent:', () => {
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
+      imports: [ PoButtonModule ],
       declarations: [
         PoUploadComponent,
         PoFieldContainerComponent,
-        PoButtonComponent,
         PoFieldContainerBottomComponent
       ],
       providers: [ HttpClient, HttpHandler]
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html
@@ -0,0 +1,10 @@
+<div class="po-loading-icon" [class.po-loading-icon-neutral-color]="neutralColor">
+  <span class="po-loading-icon-bar po-loading-icon-bar-1"></span>
+  <span class="po-loading-icon-bar po-loading-icon-bar-2"></span>
+  <span class="po-loading-icon-bar po-loading-icon-bar-3"></span>
+  <span class="po-loading-icon-bar po-loading-icon-bar-4"></span>
+  <span class="po-loading-icon-bar po-loading-icon-bar-5"></span>
+  <span class="po-loading-icon-bar po-loading-icon-bar-6"></span>
+  <span class="po-loading-icon-bar po-loading-icon-bar-7"></span>
+  <span class="po-loading-icon-bar po-loading-icon-bar-8"></span>
+</div>
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts
@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { configureTestSuite, expectPropertiesValues } from '../../../util-test/util-expect.spec';
+
+import { PoLoadingIconComponent } from './po-loading-icon.component';
+import { PoLoadingModule } from '../po-loading.module';
+
+describe('PoLoadingOverlayComponent', () => {
+  let component: PoLoadingIconComponent;
+  let fixture: ComponentFixture<PoLoadingIconComponent>;
+  let nativeElement: any;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+    imports: [ PoLoadingModule ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoLoadingIconComponent);
+    component = fixture.componentInstance;
+
+    nativeElement = fixture.debugElement.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component instanceof PoLoadingIconComponent).toBeTruthy();
+  });
+
+  describe('Properties', () => {
+
+    it('p-neutral-color: should update property with valid values', () => {
+      const validValuesTrue = [true, 'true', 1, ''];
+      const validValuesFalse = [false, 'false', 0];
+
+      expectPropertiesValues(component, 'neutralColor', validValuesTrue, true);
+      expectPropertiesValues(component, 'neutralColor', validValuesFalse, false);
+    });
+
+    it('p-neutral-color: should update property with false if it receives an invalid values', () => {
+      const invalidValues = [null, undefined, NaN, 'teste'];
+
+      expectPropertiesValues(component, 'neutralColor', invalidValues, false);
+    });
+  });
+
+  describe('Templates', () => {
+
+    it('should count the amount of `po-loading-icon-bar` elements', () => {
+      const iconBars = fixture.debugElement.queryAll(By.css('.po-loading-icon-bar'));
+
+      expect(iconBars.length).toBe(8);
+    });
+  });
+
+});
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts
@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+
+import { convertToBoolean } from '../../../utils/util';
+
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Componente que exibe um ícone de carregamento de conteúdo. A cor padrão para ele é a primária conforme o tema utilizado.
+ * É possível alterá-la para um tom cinza conforme a necessidade.
+ */
+@Component({
+  selector: 'po-loading-icon',
+  templateUrl: 'po-loading-icon.component.html'
+})
+export class PoLoadingIconComponent {
+
+  private _neutralColor: boolean;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Definição para cor neutra (cinza) para o ícone de carregamento.
+   *
+   * @default `false`
+   */
+  @Input('p-neutral-color') set neutralColor(value: boolean) {
+    this._neutralColor = convertToBoolean(value);
+  }
+
+  get neutralColor(): boolean {
+    return this._neutralColor;
+  }
+
+}
diff --git a/projects/ui/src/lib/components/po-loading/po-loading.component.html b/projects/ui/src/lib/components/po-loading/po-loading.component.html
@@ -1,4 +1,4 @@
 <div class="po-loading">
-  <span class="po-loading-icon"></span>
+  <po-loading-icon></po-loading-icon>
   <span class="po-loading-label po-text-ellipsis" *ngIf="text">{{text}}</span>
 </div>
diff --git a/projects/ui/src/lib/components/po-loading/po-loading.component.spec.ts b/projects/ui/src/lib/components/po-loading/po-loading.component.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { configureTestSuite } from './../../util-test/util-expect.spec';
 
 import { PoLoadingComponent } from './po-loading.component';
+import { PoLoadingIconComponent } from './po-loading-icon/po-loading-icon.component';
 
 describe('PoLoadingComponent', () => {
   let component: PoLoadingComponent;
@@ -11,7 +12,7 @@ describe('PoLoadingComponent', () => {
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
-      declarations: [ PoLoadingComponent ]
+      declarations: [ PoLoadingComponent, PoLoadingIconComponent ]
     });
   });
 
diff --git a/projects/ui/src/lib/components/po-loading/po-loading.module.ts b/projects/ui/src/lib/components/po-loading/po-loading.module.ts
@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { PoLanguageModule } from './../../services/po-language/po-language.module';
 
 import { PoLoadingComponent } from './po-loading.component';
+import { PoLoadingIconComponent } from './po-loading-icon/po-loading-icon.component';
 import { PoLoadingOverlayComponent } from './po-loading-overlay/po-loading-overlay.component';
 
 /**
@@ -19,10 +20,12 @@ import { PoLoadingOverlayComponent } from './po-loading-overlay/po-loading-overl
   ],
   declarations: [
     PoLoadingComponent,
+    PoLoadingIconComponent,
     PoLoadingOverlayComponent
   ],
   exports: [
     PoLoadingComponent,
+    PoLoadingIconComponent,
     PoLoadingOverlayComponent
   ]
 })
diff --git a/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html b/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html
@@ -8,7 +8,7 @@
 
   <div class="po-menu-filter-search-icon-container">
     <span *ngIf="!loading" class="po-icon po-menu-filter-icon po-icon-search"></span>
-    <span *ngIf="loading" class="po-icon po-menu-filter-icon po-loading-icon"></span>
+    <po-loading-icon *ngIf="loading" ></po-loading-icon>
   </div>
   <div class="po-menu-filter-close-icon-container">
     <po-clean [p-element-ref]="inputFilterElement" (p-change-event)="filterItems(inputFilter.value)"></po-clean>
diff --git a/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.spec.ts b/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.spec.ts
@@ -3,6 +3,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { configureTestSuite } from './../../../util-test/util-expect.spec';
 import { PoCleanComponent } from './../../po-field/po-clean/po-clean.component';
 
+import { PoLoadingModule } from '../../po-loading';
+
 import { PoMenuFilterComponent } from './po-menu-filter.component';
 
 describe('PoMenuFilterComponent:', () => {
@@ -11,6 +13,7 @@ describe('PoMenuFilterComponent:', () => {
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
+      imports: [ PoLoadingModule ],
       declarations: [ PoCleanComponent, PoMenuFilterComponent ]
     });
   });
diff --git a/projects/ui/src/lib/components/po-menu/po-menu.component.spec.ts b/projects/ui/src/lib/components/po-menu/po-menu.component.spec.ts
@@ -11,6 +11,8 @@ import * as utilsFunctions from '../../utils/util';
 import { configureTestSuite } from './../../util-test/util-expect.spec';
 import { PoCleanComponent } from './../po-field/po-clean/po-clean.component';
 
+import { PoLoadingModule } from '../po-loading/po-loading.module';
+
 import { PoBadgeComponent } from '../po-badge';
 import { PoMenuComponent } from './po-menu.component';
 import { PoMenuFilterComponent } from './po-menu-filter/po-menu-filter.component';
@@ -43,7 +45,11 @@ describe('PoMenuComponent:', () => {
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, RouterTestingModule.withRoutes(routes)],
+      imports: [
+        HttpClientTestingModule, 
+        RouterTestingModule.withRoutes(routes),
+        PoLoadingModule
+      ],
       declarations: [
         PoCleanComponent,
         PoMenuComponent,
diff --git a/projects/ui/src/lib/components/po-menu/po-menu.module.ts b/projects/ui/src/lib/components/po-menu/po-menu.module.ts
@@ -4,6 +4,8 @@ import { RouterModule } from '@angular/router';
 
 import { PoBadgeModule } from '../po-badge/po-badge.module';
 import { PoFieldModule } from '../po-field/po-field.module';
+import { PoLoadingModule } from '../po-loading/po-loading.module';
+
 import { PoMenuComponent } from './po-menu.component';
 import { PoMenuFilterComponent } from './po-menu-filter/po-menu-filter.component';
 import { PoMenuHeaderTemplateDirective } from './po-menu-header-template/po-menu-header-template.directive';
@@ -19,7 +21,8 @@ import { PoMenuItemComponent } from './po-menu-item/po-menu-item.component';
     CommonModule,
     RouterModule,
     PoBadgeModule,
-    PoFieldModule
+    PoFieldModule,
+    PoLoadingModule
   ],
   declarations: [
     PoMenuComponent,
diff --git a/projects/ui/src/lib/components/po-modal/po-modal.component.spec.ts b/projects/ui/src/lib/components/po-modal/po-modal.component.spec.ts
@@ -3,7 +3,8 @@ import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 
-import { PoButtonComponent } from './../po-button/po-button.component';
+import { PoButtonModule } from '../po-button';
+
 import { PoCleanComponent } from './../po-field/po-clean/po-clean.component';
 import {
   PoFieldContainerBottomComponent
@@ -46,10 +47,9 @@ describe('PoModalComponent:', () => {
   beforeEach(() => {
     TestBed
       .configureTestingModule({
-        imports: [FormsModule],
+        imports: [FormsModule, PoButtonModule],
         declarations: [
           PoModalComponent,
-          PoButtonComponent,
           PoInputComponent,
           PoCleanComponent,
           PoFieldContainerComponent,
@@ -473,7 +473,7 @@ describe('PoModalComponent:', () => {
 
     function getModalActionIconLoading() {
       return element.nativeElement.querySelector(`
-        .po-modal .po-modal-footer .po-button-modal-first-action button:disabled span.po-button-loading-icon
+        .po-modal .po-modal-footer .po-button-modal-first-action button:disabled div.po-button-loading-icon
       `);
     }
 
diff --git a/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.spec.ts b/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.spec.ts
diff --git a/projects/ui/src/lib/components/po-page/po-page-detail/po-page-detail.component.spec.ts b/projects/ui/src/lib/components/po-page/po-page-detail/po-page-detail.component.spec.ts
diff --git a/projects/ui/src/lib/components/po-page/po-page-edit/po-page-edit.component.spec.ts b/projects/ui/src/lib/components/po-page/po-page-edit/po-page-edit.component.spec.ts
diff --git a/projects/ui/src/lib/components/po-page/po-page-list/po-page-list.component.spec.ts b/projects/ui/src/lib/components/po-page/po-page-list/po-page-list.component.spec.ts
diff --git a/projects/ui/src/lib/directives/po-tooltip/po-tooltip.directive.spec.ts b/projects/ui/src/lib/directives/po-tooltip/po-tooltip.directive.spec.ts
