Loader component

Resolves #728

Author: oodamien

ui/src/app/runtime/runtime-app/runtime-app.component.html

@@ -33,4 +33,6 @@ <h4 class="modal-title pull-left">Instances for app <strong>{{ runtimeApp.deploy
   </div>
 </div>
 
-<ng-template #loading><div>Loading...</div></ng-template>
+<ng-template #loading>
+  <app-loader></app-loader>
+</ng-template>

ui/src/app/runtime/runtime-app/runtime-app.component.spec.ts

@@ -13,6 +13,7 @@ import {RuntimeApp} from '../model/runtime-app';
 import {KeyValuePipe} from '../../shared/pipes/key-value-filter.pipe';
 import {RuntimeAppInstance} from '../model/runtime-app-instance';
 import {NgBusyModule} from 'ng-busy';
+import { LoaderComponent } from '../../shared/components/loader/loader.component';
 
 describe('RuntimeAppComponent', () => {
   let component: RuntimeAppComponent;
@@ -27,7 +28,8 @@ describe('RuntimeAppComponent', () => {
       declarations: [
         RuntimeAppComponent,
         KeyValuePipe,
-        RuntimeAppStateComponent
+        RuntimeAppStateComponent,
+        LoaderComponent
       ],
       imports: [
         NgBusyModule,

ui/src/app/runtime/runtime-apps/runtime-apps.component.html

@@ -71,7 +71,7 @@ <h1>Runtime applications</h1>
   </div>
 
   <ng-template #loading>
-    <div>Loading...</div>
+    <app-loader></app-loader>
   </ng-template>
 
 </div>

ui/src/app/runtime/runtime-apps/runtime-apps.component.spec.ts

@@ -14,6 +14,7 @@ import {RuntimeAppStateComponent} from '../components/runtime-app-state/runtime-
 import {RuntimeAppComponent} from '../runtime-app/runtime-app.component';
 import {NgBusyModule} from 'ng-busy';
 import {MockModalService} from '../../tests/mocks/modal';
+import { LoaderComponent } from '../../shared/components/loader/loader.component';
 
 describe('RuntimeAppsComponent', () => {
   let component: RuntimeAppsComponent;
@@ -27,7 +28,8 @@ describe('RuntimeAppsComponent', () => {
       declarations: [
         RuntimeAppsComponent,
         KeyValuePipe,
-        RuntimeAppStateComponent
+        RuntimeAppStateComponent,
+        LoaderComponent
       ],
       imports: [
         NgBusyModule,

ui/src/app/shared/components/loader/loader.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+/**
+ * Loader component
+ * <app-loader></app-loader>
+ * <app-loader text="Loading in progress…"></app-loader>
+ *
+ * @author Damien Vitrac
+ */
+@Component({
+  selector: 'app-loader',
+  styleUrls: ['styles.scss'],
+  template: `
+    <div class="app-loader">
+      <div class="icon icon-middle spinner" style="font-size: 16px;">
+        <svg class="icon-spinner-sm" height="100px" width="100px" viewBox="0 0 101 101">
+          <circle class="ring" cx="50%" cy="50%" fill="none" r="45%" stroke-linecap="butt" stroke-width="10%"></circle>
+          <circle class="path" cx="50%" cy="50%" fill="none" r="45%" stroke-linecap="butt" stroke-width="10%"></circle>
+        </svg>
+      </div>
+      <span>
+        {{ text }}
+      </span>
+    </div>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoaderComponent {
+
+  /**
+   * Text display
+   */
+  @Input() text: string = 'Loading…';
+
+}

ui/src/app/shared/components/loader/styles.scss

@@ -0,0 +1,14 @@
+
+:host {
+  padding: 1rem 0;
+  color: #939da2;
+  >div {
+    padding-left: 30px;
+    position: relative;
+    .icon {
+      position: absolute;
+      top: 4px;
+      left: 2px;
+    }
+  }
+}

ui/src/app/shared/shared.module.ts

@@ -1,31 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
 import { HttpModule } from '@angular/http';
-
 import { ToastyModule } from 'ng2-toasty';
-
 import { NgBusyModule, BusyConfig, BUSY_CONFIG_DEFAULTS } from 'ng-busy';
 import { ErrorHandler } from './model/error-handler';
 import { CapitalizePipe } from './pipes/capitalize.pipe';
 import { TriStateCheckboxComponent } from './components/tri-state-checkbox.component';
 import { TriStateButtonComponent } from './components/tri-state-button.component';
 import { ClickOutsideDirective } from './directives/click-outside.directive';
 import { SearchfilterPipe } from './pipes/search-filter.pipe';
-
 import { KeyValuePipe } from './pipes/key-value-filter.pipe';
-
 import { NgxPaginationModule } from 'ngx-pagination';
 import { PropertyTableComponent } from './components/property-table/property-table.component';
-
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-
 import { TabComponent, TabsComponent } from './components/tabs.component';
-
 import { ParserService } from './services/parser.service';
 import { SharedAppsService } from './services/shared-apps.service';
 import { DataflowDateTimePipe } from './pipes/dataflow-date-time.pipe';
@@ -46,6 +38,7 @@ import { ConfirmComponent } from './components/confirm/confirm.component';
 import { BusyService } from './services/busy.service';
 import { AutoResizeDirective } from './directives/auto-resize.directive';
 import { StreamDslComponent } from './components/dsl/dsl.component';
+import { LoaderComponent } from './components/loader/loader.component';
 
 const busyConfig: BusyConfig = {
   message: 'Processing..',
@@ -100,7 +93,8 @@ const busyConfig: BusyConfig = {
     StreamDslComponent,
     TruncatePipe,
     OrderByPipe,
-    ConfirmComponent
+    ConfirmComponent,
+    LoaderComponent
   ],
   entryComponents: [
     ConfirmComponent
@@ -140,7 +134,8 @@ const busyConfig: BusyConfig = {
     TruncatePipe,
     OrderByPipe,
     ConfirmComponent,
-    AutoResizeDirective
+    AutoResizeDirective,
+    LoaderComponent
   ]
 })
 export class SharedModule {

ui/src/app/streams/stream-deploy/builder/builder.component.html

@@ -363,7 +363,5 @@
   </form>
 </div>
 <ng-template #loading>
-  <div>
-    Loading ...
-  </div>
+  <app-loader></app-loader>
 </ng-template>

ui/src/app/streams/stream-deploy/stream-deploy.component.html

@@ -44,7 +44,5 @@ <h1 style="margin-bottom: 10px">Deploy Stream Definition {{ config.id }}</h1>
 </div>
 
 <ng-template #loading>
-  <div>
-    Loading ...
-  </div>
+  <app-loader></app-loader>
 </ng-template>

ui/src/app/streams/stream/graph/stream-graph.component.spec.ts

@@ -13,6 +13,7 @@ import { RenderService } from '../../components/flo/render.service';
 import { MockSharedAppService } from '../../../tests/mocks/shared-app';
 import { BusyService } from '../../../shared/services/busy.service';
 import { StreamGraphComponent } from './stream-graph.component';
+import { LoaderComponent } from '../../../shared/components/loader/loader.component';
 
 
 /**
@@ -38,7 +39,8 @@ describe('StreamGraphComponent', () => {
     TestBed.configureTestingModule({
       declarations: [
         StreamGraphComponent,
-        GraphViewComponent
+        GraphViewComponent,
+        LoaderComponent
       ],
       imports: [
         RouterTestingModule.withRoutes([]),