GUI2 Changed loading screen display to be a component

Change-Id: Id1592b498e6827ec4cd3544dec92e46f00e8d378
diff --git a/web/gui2-fw-lib/.gitignore b/web/gui2-fw-lib/.gitignore
index ee5c9d8..b01fc2b 100644
--- a/web/gui2-fw-lib/.gitignore
+++ b/web/gui2-fw-lib/.gitignore
@@ -37,3 +37,5 @@
 # System Files
 .DS_Store
 Thumbs.db
+
+projects/gui2-fw-lib/src/assets
diff --git a/web/gui2-fw-lib/BUILD b/web/gui2-fw-lib/BUILD
index 2843d3d..bb59e5b 100644
--- a/web/gui2-fw-lib/BUILD
+++ b/web/gui2-fw-lib/BUILD
@@ -207,6 +207,7 @@
         "@nodejs//:bin/nodejs/bin/node",
         "@nodejs//:bin/nodejs/bin/npm",
         ":onos-gui2-fw-npm-install",
+        "//web/gui:onos-gui-data-for-gui2",
         ":_root_level_files",
         ":_gui2_fw_lib_src",
     ],
@@ -233,6 +234,10 @@
           "   See bazel-genfiles/web/gui2-fw-lib/gui2-fw-ng-build-prod.log for more details' >&2;" +
           "   exit 1;" +
           " fi;" +
+          # see https://github.com/angular/angular-cli/issues/11071 - Angular CLI does not yet copy across assets
+          " unzip -q $$ROOT/$(location //web/gui:onos-gui-data-for-gui2) web/gui/src/main/webapp/data/img/loading/* &&" +
+          " mkdir -p dist/gui2-fw-lib/assets &&" +
+          " mv web/gui/src/main/webapp/data/img/loading dist/gui2-fw-lib/assets &&" +
           " cd dist/gui2-fw-lib &&" +
           " npm pack &&" +
           " mv gui2-fw-lib-*.tgz $$ROOT/$(location gui2-fw-lib-ver.tgz) &&" +
diff --git a/web/gui2-fw-lib/angular.json b/web/gui2-fw-lib/angular.json
index 739ee9f..e944004 100644
--- a/web/gui2-fw-lib/angular.json
+++ b/web/gui2-fw-lib/angular.json
@@ -159,4 +159,4 @@
     }
   },
   "defaultProject": "gui2-fw-lib-app"
-}
\ No newline at end of file
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/gui2-fw-lib.module.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/gui2-fw-lib.module.ts
index f213ca1..2027b14 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/gui2-fw-lib.module.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/gui2-fw-lib.module.ts
@@ -24,6 +24,7 @@
 import { TableFilterPipe } from './widget/tablefilter.pipe';
 import { TableResizeDirective } from './widget/tableresize.directive';
 import { QuickhelpComponent } from './layer/quickhelp/quickhelp.component';
+import { LoadingComponent } from './layer/loading/loading.component';
 
 @NgModule({
   imports: [
@@ -38,7 +39,8 @@
     ConfirmComponent,
     QuickhelpComponent,
     MastComponent,
-    TableFilterPipe
+    TableFilterPipe,
+    LoadingComponent
   ],
   exports: [
     DetectBrowserDirective,
@@ -49,7 +51,8 @@
     ConfirmComponent,
     QuickhelpComponent,
     MastComponent,
-    TableFilterPipe
+    TableFilterPipe,
+    LoadingComponent
   ]
 })
 export class Gui2FwLibModule { }
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.spec.ts
deleted file mode 100644
index fc990eb..0000000
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.spec.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- *  Copyright 2018-present Open Networking Foundation
- *
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../log.service';
-import { ConsoleLoggerService } from '../consolelogger.service';
-import { LoadingService } from './loading.service';
-import { FnService } from '../util/fn.service';
-import { ThemeService } from '../util/theme.service';
-import { WebSocketService } from '../remote/websocket.service';
-
-class MockFnService {
-    debug() {
-    }
-}
-
-class MockThemeService {}
-
-/**
- * ONOS GUI -- Layer -- Loading Service - Unit Tests
- */
-describe('LoadingService', () => {
-    let log: LogService;
-    let mockWindow: Window;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        mockWindow = <any>{
-            innerWidth: 400,
-            innerHeight: 200,
-            navigator: {
-                userAgent: 'defaultUA'
-            }
-        };
-
-        TestBed.configureTestingModule({
-            providers: [LoadingService,
-                { provide: LogService, useValue: log },
-                { provide: FnService, useClass: MockFnService },
-                { provide: ThemeService, useClass: MockThemeService },
-                { provide: 'Window', useFactory: (() => mockWindow ) }
-            ]
-        });
-    });
-
-    it('should be created', inject([LoadingService], (service: LoadingService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.ts
deleted file mode 100644
index 01391f1..0000000
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-/*
- *  Copyright 2018-present Open Networking Foundation
- *
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-import {Inject, Injectable} from '@angular/core';
-import { FnService } from '../util/fn.service';
-import { LogService } from '../log.service';
-import { ThemeService } from '../util/theme.service';
-import * as d3 from 'd3';
-
-const id = 'loading-anim';
-const dir = 'data/img/loading/';
-const pfx = '/load-';
-const nImgs = 16;
-const speed = 100;
-const waitDelay = 500;
-
-
-/**
- * ONOS GUI -- Layer -- Loading Service
- *
- * Provides a mechanism to start/stop the loading animation, center screen.
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class LoadingService {
-    images: any[] = [];
-    idx = 0;
-    img: any;
-    theme: string;
-    task: any;
-    wait: number;
-
-    constructor(
-        private fs: FnService,
-        private log: LogService,
-        private ts: ThemeService,
-        @Inject('Window') private w: any
-    ) {
-        this.preloadImages();
-        this.log.debug('LoadingService constructed');
-    }
-
-    dbg(...args) {
-        this.fs.debug(this.constructor.name, args);
-    }
-
-    preloadImages() {
-        let idx: number;
-
-        this.dbg('preload images start...');
-        for (idx = 1; idx <= nImgs ; idx++) {
-            this.addImg('light', idx);
-            this.addImg('dark', idx);
-        }
-        this.dbg('preload images DONE!', this.images);
-    }
-
-    addImg(theme: string, idx: number) {
-        const img = new Image();
-        img.src = this.fname(idx, theme);
-        this.images.push(img);
-    }
-
-    fname(i: number, theme: string) {
-        const z = i > 9 ? '' : '0';
-        return dir + theme + pfx + z + i + '.png';
-    }
-
-    nextFrame() {
-        this.idx = this.idx === 16 ? 1 : this.idx + 1;
-        this.img.attr('src', this.fname(this.idx, this.theme));
-    }
-
-    // start displaying 'loading...' animation (idempotent)
-    startAnim() {
-        this.dbg('start ANIMATION');
-        this.theme = this.ts.getTheme();
-        let div = d3.select('#' + id);
-        if (div.empty()) {
-            div = d3.select('body')
-                .append('div')
-                .attr('id', id);
-            this.img = div
-                .append('img')
-                .attr('src', this.fname(1, this.theme));
-            this.idx = 1;
-            this.task = setInterval(() => this.nextFrame(), speed);
-        }
-    }
-
-    // stop displaying 'loading...' animation (idempotent)
-    stopAnim() {
-        this.dbg('*stop* ANIMATION');
-        if (this.task) {
-            clearInterval(this.task);
-            this.task = null;
-        }
-        d3.select('#' + id).remove();
-    }
-
-    // schedule function to start animation in the future
-    start() {
-        this.dbg('start (schedule)');
-        this.wait = this.w.setTimeout(this.startAnim(), waitDelay);
-    }
-
-    // cancel future start, if any; stop the animation
-    stop() {
-        if (this.wait) {
-            this.dbg('start CANCELED');
-            clearTimeout(this.wait);
-            this.wait = null;
-        }
-        this.stopAnim();
-    }
-
-    // return true if start() has been called but not stop()
-    waiting(): boolean {
-        return !!this.wait;
-    }
-
-
-}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.css
similarity index 90%
rename from web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.css
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.css
index 4ba98a9..9095bd2 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.css
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.css
@@ -1,5 +1,5 @@
 /*
- *  Copyright 2018-present Open Networking Foundation
+ *  Copyright 2019-present Open Networking Foundation
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -24,4 +24,5 @@
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
+    z-index: -5000;
 }
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.html b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.html
new file mode 100644
index 0000000..8220197
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.html
@@ -0,0 +1,16 @@
+<!--
+~ Copyright 2019-present Open Networking Foundation
+~
+~ Licensed under the Apache License, Version 2.0 (the "License");
+~ you may not use this file except in compliance with the License.
+~ You may obtain a copy of the License at
+~
+~     http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<img id="loading-anim" [src]="img" alt="loading - please wait" [@loadingState]="running"/>
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.spec.ts
new file mode 100644
index 0000000..185c20e
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.spec.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2019-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingComponent } from './loading.component';
+import {LogService} from '../../log.service';
+import {ConsoleLoggerService} from '../../consolelogger.service';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('LoadingComponent', () => {
+    let log: LogService;
+    let component: LoadingComponent;
+    let fixture: ComponentFixture<LoadingComponent>;
+
+    beforeEach(async(() => {
+        log = new ConsoleLoggerService();
+        TestBed.configureTestingModule({
+            imports: [ BrowserAnimationsModule ],
+            declarations: [ LoadingComponent ],
+            providers: [
+                { provide: LogService, useValue: log }
+            ]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LoadingComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.ts
new file mode 100644
index 0000000..a8e5433
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading/loading.component.ts
@@ -0,0 +1,110 @@
+/*
+ * Copyright 2019-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
+import {LogService} from '../../log.service';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+const LOADING_IMG_DIR = 'assets/loading/';
+const LOADING_PFX = '/load-';
+const NUM_IMGS = 16;
+
+/**
+ * ONOS GUI - A component that shows the loading icon
+ *
+ * Should be shown if someone has to wait for more than
+ * a certain time for data to be retrieved
+ * Note the animation - there is a pause of 500ms before the images appear
+ * and then it eases in over 200ms
+ */
+@Component({
+    selector: 'onos-loading',
+    templateUrl: './loading.component.html',
+    styleUrls: ['./loading.component.css'],
+    animations: [
+        trigger('loadingState', [
+            state('false', style({
+                opacity: '0.0',
+                'z-index': -5000
+            })),
+            state('true', style({
+                opacity: '1.0',
+                'z-index': 5000
+            })),
+            transition('0 => 1', animate('200ms 500ms ease-in')),
+            transition('1 => 0', animate('200ms ease-out'))
+        ])
+    ]
+})
+export class LoadingComponent implements OnChanges {
+    @Input() theme: string = 'light';
+    @Input() running: boolean;
+
+    speed: number = 8; // Frames per second
+    idx = 1;
+    images: HTMLImageElement[] = [];
+    img: string;
+    task: any;
+
+    constructor(
+        private log: LogService,
+    ) {
+        let idx: number;
+
+        for (idx = 1; idx <= NUM_IMGS ; idx++) {
+            this.addImg('light', idx);
+            this.addImg('dark', idx);
+        }
+
+        this.log.debug('LoadingComponent constructed - images preloaded from', this.fname(1, this.theme));
+    }
+
+    /**
+     * Detects changes in in Input variable
+     * Here we want to detect if running has been enabled or disabled
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['running']) {
+            const newRunning: boolean = changes['running'].currentValue;
+
+            if (newRunning) {
+                this.task = setInterval(() => this.nextFrame(), 1000 / this.speed);
+            } else {
+                if (this.task) {
+                    clearInterval(this.task);
+                    this.task = null;
+                }
+            }
+        }
+    }
+
+    private addImg(theme: string, idx: number): void {
+        const img = new Image();
+        img.src = this.fname(idx, theme);
+        this.images.push(img);
+    }
+
+    private fname(i: number, theme: string): string {
+        const z = i > 9 ? '' : '0';
+        return LOADING_IMG_DIR + theme + LOADING_PFX + z + i + '.png';
+    }
+
+    private nextFrame(): void {
+        this.idx = this.idx === 16 ? 1 : this.idx + 1;
+        this.img  = this.fname(this.idx, this.theme);
+    }
+
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/detailspanel.base.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/detailspanel.base.ts
index 03c681b..97efee6 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/detailspanel.base.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/detailspanel.base.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { FnService } from '../util/fn.service';
-import { LoadingService } from '../layer/loading.service';
 import { LogService } from '../log.service';
 import { WebSocketService } from '../remote/websocket.service';
 
@@ -50,12 +49,11 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService,
         protected tag: string,
     ) {
-        super(fs, ls, log);
+        super(fs, log);
         this.root = tag + 's';
         this.req = tag + 'DetailsRequest';
         this.resp = tag + 'DetailsResponse';
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts
index 628f84f..f568dc8 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { FnService } from '../util/fn.service';
-import { LoadingService } from '../layer/loading.service';
 import { LogService } from '../log.service';
 
 
@@ -39,7 +38,6 @@
 
     protected constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService
     ) {
 //        this.log.debug('Panel base class constructed');
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.base.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.base.ts
index e011057..9a99e5a 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.base.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.base.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { FnService } from '../util/fn.service';
-import { LoadingService } from '../layer/loading.service';
 import { LogService } from '../log.service';
 import { WebSocketService } from '../remote/websocket.service';
 import { Observable, of } from 'rxjs';
@@ -84,6 +83,7 @@
     public selectCallback; // Function
     protected parentSelCb = null;
     protected responseCallback; // Function
+    public loadingIconShown: boolean = false;
     selId: string = undefined;
     tableData: any[] = [];
     tableDataFilter: TableFilter;
@@ -99,7 +99,6 @@
 
     protected constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService,
         protected tag: string,
@@ -144,7 +143,7 @@
     destroy() {
         this.wss.unbindHandlers(this.handlers);
         this.stopRefresh();
-        this.ls.stop();
+        this.loadingIconShown = false;
     }
 
     /**
@@ -154,7 +153,7 @@
      * Happens every 2 seconds
      */
     tableDataResponseCb(data: TableResponse) {
-        this.ls.stop();
+        this.loadingIconShown = false;
 
         const newTableData: any[] = Array.from(data[this.root]);
         this.annots.noRowsMsg = data.annots.no_rows_msg;
@@ -196,7 +195,7 @@
                 this.log.debug('Table data REQUEST:', this.req, p);
             }
             this.wss.sendEvent(this.req, p);
-            this.ls.start();
+            this.loadingIconShown = true;
         }
     }
 
@@ -218,7 +217,7 @@
     startRefresh() {
         this.refreshPromise =
             setInterval(() => {
-                if (!this.ls.waiting()) {
+                if (!this.loadingIconShown) {
                     if (this.fs.debugOn('table')) {
                         this.log.debug('Refreshing ' + this.root + ' page');
                     }
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/public_api.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/public_api.ts
index fd1e9c1..9c70db9 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/public_api.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/public_api.ts
@@ -31,7 +31,6 @@
 export * from './lib/remote/urlfn.service';
 export * from './lib/remote/websocket.service';
 export * from './lib/onos.service';
-export * from './lib/layer/loading.service';
 export * from './lib/layer/panel.service';
 export * from './lib/svg/svgutil.service';
 export * from './lib/svg/glyphdata.service';
@@ -50,6 +49,7 @@
 export * from './lib/layer/flash/flash.component';
 export * from './lib/layer/confirm/confirm.component';
 export * from './lib/layer/quickhelp/quickhelp.component';
+export * from './lib/layer/loading/loading.component';
 export * from './lib/svg/icon/icon.component';
 
 export * from './lib/widget/tableresize.directive';
diff --git a/web/gui2-fw-lib/src/app/app.component.html b/web/gui2-fw-lib/src/app/app.component.html
index f8d881f..2cc727e 100644
--- a/web/gui2-fw-lib/src/app/app.component.html
+++ b/web/gui2-fw-lib/src/app/app.component.html
@@ -45,3 +45,5 @@
   it is picked up in this app.
 </p>
 <onos-quickhelp></onos-quickhelp>
+<onos-loading [running]="loadingRunning"></onos-loading>
+<button (click)="toggleLoadingRunning()">Toggle loading image</button>
diff --git a/web/gui2-fw-lib/src/app/app.component.ts b/web/gui2-fw-lib/src/app/app.component.ts
index b6a7c8b..a5a5450 100644
--- a/web/gui2-fw-lib/src/app/app.component.ts
+++ b/web/gui2-fw-lib/src/app/app.component.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { FnService } from 'gui2-fw-lib';
+import {Component} from '@angular/core';
+import {FnService, LogService} from 'gui2-fw-lib';
 
 @Component({
   selector: 'app-root',
@@ -24,10 +24,15 @@
 })
 export class AppComponent {
   title = 'Test app for GUI Framework Library';
+  loadingRunning: boolean = false;
 
   constructor(
     protected fs: FnService
   ) {
     this.title = this.fs.cap(this.title);
   }
+
+    toggleLoadingRunning() {
+        this.loadingRunning = !this.loadingRunning;
+    }
 }
diff --git a/web/gui2-fw-lib/src/assets/.gitkeep b/web/gui2-fw-lib/src/assets/.gitkeep
deleted file mode 100644
index e69de29..0000000
--- a/web/gui2-fw-lib/src/assets/.gitkeep
+++ /dev/null
diff --git a/web/gui2-topo-lib/package-lock.json b/web/gui2-topo-lib/package-lock.json
index e492e32..7457b6c 100644
--- a/web/gui2-topo-lib/package-lock.json
+++ b/web/gui2-topo-lib/package-lock.json
@@ -4873,7 +4873,7 @@
     },
     "gui2-fw-lib": {
       "version": "file:../gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.0.0.tgz",
-      "integrity": "sha512-sAZOR92QXU8IIphWwT16d5T2w4ekVNvs83wPfPxRKkCDoItIywovna7tt6n//sXbF5+wjjTgIqT6zDwedm9saw==",
+      "integrity": "sha512-kq9Xg4ERgY0R6nLIBkPkTHoqolpe2jNDS0M1qu8407bt3450ydx+63Ux2GVb/rKPc//p9Wi+xnNBuib3Nf4DNw==",
       "requires": {
         "tslib": "1.9.3"
       }
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/details/details.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/details/details.component.ts
index ea1462c..85282e1 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/details/details.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/details/details.component.ts
@@ -25,7 +25,6 @@
 import {
     DetailsPanelBaseImpl,
     FnService, LionService,
-    LoadingService,
     LogService,
     WebSocketService
 } from 'gui2-fw-lib';
@@ -119,12 +118,11 @@
     constructor(
         protected fs: FnService,
         protected log: LogService,
-        protected ls: LoadingService,
         protected router: Router,
         protected wss: WebSocketService,
         private lion: LionService
     ) {
-        super(fs, ls, log, wss, 'topo');
+        super(fs, log, wss, 'topo');
 
         if (this.lion.ubercache.length === 0) {
             this.lionFn = this.dummyLion;
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.ts
index 487550d..70cbb1f 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/instance/instance.component.ts
@@ -22,7 +22,6 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
     LogService,
-    LoadingService,
     FnService,
     PanelBaseImpl,
     IconService,
@@ -83,12 +82,11 @@
     constructor(
         protected fs: FnService,
         protected log: LogService,
-        protected ls: LoadingService,
         protected is: IconService,
         protected sus: SvgUtilService,
         private lion: LionService
     ) {
-        super(fs, ls, log);
+        super(fs, log);
         this.onosInstances = <Array<Instance>>[];
 
         if (this.lion.ubercache.length === 0) {
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts
index c97e0ca..5e4cf17 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts
@@ -1,13 +1,13 @@
 
 import {
-    Component, EventEmitter, OnChanges,
+    Component, EventEmitter,
     OnDestroy,
-    OnInit, Output, SimpleChanges,
+    OnInit, Output,
 } from '@angular/core';
 import {
     DetailsPanelBaseImpl,
     FnService,
-    LionService, LoadingService,
+    LionService,
     LogService,
     WebSocketService
 } from 'gui2-fw-lib';
@@ -38,11 +38,10 @@
     constructor(
         protected fs: FnService,
         protected log: LogService,
-        protected ls: LoadingService,
         protected wss: WebSocketService,
         private lion: LionService
     ) {
-        super(fs, ls, log, wss, 'topo');
+        super(fs, log, wss, 'topo');
 
         if (this.lion.ubercache.length === 0) {
             this.lionFn = this.dummyLion;
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/summary/summary.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/summary/summary.component.ts
index 3a42a0b..e47fa64 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/summary/summary.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/summary/summary.component.ts
@@ -25,7 +25,6 @@
 import { TopoPanelBaseImpl } from '../topopanel.base';
 import {
     LogService,
-    LoadingService,
     FnService,
     WebSocketService,
     GlyphService
@@ -74,11 +73,10 @@
     constructor(
         protected fs: FnService,
         protected log: LogService,
-        protected ls: LoadingService,
         protected wss: WebSocketService,
         protected gs: GlyphService
     ) {
-        super(fs, ls, log, 'summary');
+        super(fs, log, 'summary');
         this.summaryData = <SummaryResponse>{};
         this.log.debug('SummaryComponent constructed');
     }
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/toolbar/toolbar.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/toolbar/toolbar.component.ts
index ce7b90b..40fdfda 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/toolbar/toolbar.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/toolbar/toolbar.component.ts
@@ -16,7 +16,6 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {
     LogService,
-    LoadingService,
     FnService,
     PanelBaseImpl, LionService
 } from 'gui2-fw-lib';
@@ -88,10 +87,9 @@
     constructor(
         protected fs: FnService,
         protected log: LogService,
-        protected ls: LoadingService,
         private lion: LionService
     ) {
-        super(fs, ls, log);
+        super(fs, log);
 
         if (this.lion.ubercache.length === 0) {
             this.lionFn = this.dummyLion;
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/topopanel.base.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/topopanel.base.ts
index 48aa2ed..52966ab 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/topopanel.base.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/topopanel.base.ts
@@ -15,7 +15,6 @@
  */
 import {
     FnService,
-    LoadingService,
     LogService,
     PanelBaseImpl
 } from 'gui2-fw-lib';
@@ -31,11 +30,10 @@
 
     protected constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected id: string
     ) {
-        super(fs, ls, log);
+        super(fs, log);
     }
 
     protected init(el: any) {
diff --git a/web/gui2/BUILD b/web/gui2/BUILD
index c1d78c5..a6b5b0d 100644
--- a/web/gui2/BUILD
+++ b/web/gui2/BUILD
@@ -165,7 +165,9 @@
           #"   tail -n 100 ../../$(location onos-gui2-ng-test.log) >&2;" +
           "   exit 1;" +
           " fi;" +
-          " cd src/main/webapp/dist && jar Mcf $$ROOT/$(location onos-gui2-ng-build.jar) .",
+          " cp -r node_modules/gui2-fw-lib/assets src/main/webapp/dist &&" +
+          " cd src/main/webapp/dist &&" +
+          " jar Mcf $$ROOT/$(location onos-gui2-ng-build.jar) .",
     message = "Angular CLI 7 build",
 )
 
@@ -362,7 +364,7 @@
           " mv web/gui/src/main/resources/core WEB-INF/classes/ &&" +
           " unzip -q $$ROOT/$(location //web/gui:onos-gui-data-for-gui2) web/gui/src/main/webapp/data/**/* &&" +
           " mv web/gui/src/main/webapp/data WEB-INF/classes/ &&" +
-          " find . -type f -exec touch -t 201901200000 {} \; &&" +
+          " find . -type f -exec touch -t 201903200000 {} \; &&" +
           " jar cmf META-INF/MANIFEST.MF $$ROOT/$@ WEB-INF/web.xml WEB-INF/classes OSGI-INF/*.xml",
     output_to_bindir = 1,
     visibility = ["//visibility:public"],
diff --git a/web/gui2/angular.json b/web/gui2/angular.json
index 579fbf4..4651065 100644
--- a/web/gui2/angular.json
+++ b/web/gui2/angular.json
@@ -17,8 +17,7 @@
             "tsConfig": "src/main/webapp/tsconfig.app.json",
             "polyfills": "src/main/webapp/polyfills.ts",
             "assets": [
-              "src/main/webapp/data",
-              "src/main/webapp/app/fw/layer/loading.service.css"
+              "src/main/webapp/data"
             ],
             "styles": ["src/main/webapp/onos.global.css"],
             "scripts": []
@@ -72,8 +71,7 @@
               "src/main/webapp/app/onos.theme.css"
             ],
             "assets": [
-              "src/main/webapp/data",
-              "src/main/webapp/app/fw/layer/loading.service.css"
+              "src/main/webapp/data"
             ]
           }
         },
diff --git a/web/gui2/package-lock.json b/web/gui2/package-lock.json
index 6596486..834c3ac 100644
--- a/web/gui2/package-lock.json
+++ b/web/gui2/package-lock.json
@@ -4705,7 +4705,7 @@
     },
     "fm-gui2-lib": {
       "version": "file:../../apps/faultmanagement/fm-gui2-lib/dist/fm-gui2-lib/fm-gui2-lib-2.0.0.tgz",
-      "integrity": "sha512-AYRLoCF5jSYYAvi6fYJCepKtCm9Woregjte79YTQvgzL/+2AvTtXf9m2ezj/wmUnZOfFH6wTqVdW1OLzK/TQiQ==",
+      "integrity": "sha512-EnyUx3MN2N/+zGj+EWfmXim/DLZHE7xTBzuTQU4oPPSLctI4+bh9amCXpbMUh/adWoQaUrXIDeQmY6KRRJ6jbQ==",
       "requires": {
         "tslib": "1.9.3"
       }
@@ -5560,14 +5560,14 @@
     },
     "gui2-fw-lib": {
       "version": "file:../gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.0.0.tgz",
-      "integrity": "sha512-3UMUj7LSENJ75R5yVAZM/KmvZAA/fCG+qJl7/1VnvI/0wJGjVPp4eTEHDH2hMOkJ/yw8b0VgQARdZR49zEc2iQ==",
+      "integrity": "sha512-kq9Xg4ERgY0R6nLIBkPkTHoqolpe2jNDS0M1qu8407bt3450ydx+63Ux2GVb/rKPc//p9Wi+xnNBuib3Nf4DNw==",
       "requires": {
         "tslib": "1.9.3"
       }
     },
     "gui2-topo-lib": {
       "version": "file:../gui2-topo-lib/dist/gui2-topo-lib/gui2-topo-lib-2.0.0.tgz",
-      "integrity": "sha512-KILpP/vs5kSDK8TM6rw34ZOI4WZaRL92rRiRJswCEw8Omh86owi/FeGhwgTCg2Rk7RYum5325eELR0d1NDaKGQ==",
+      "integrity": "sha512-5Pnb1yk2sSsDLwnmrIesBH4K368g7VZY4zx501qYwBagHB0ltygWyRIHQNIU+NB4Lu7rInTVpN5GEhCCo2zYFw==",
       "requires": {
         "tslib": "1.9.3"
       }
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html
index 4a07787..77d5967 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html
@@ -14,9 +14,10 @@
 ~ limitations under the License.
 -->
 <div id="ov-app" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
+    <onos-flash id="appMsgFlash" message="{{ alertMsg }}" dwell="5000" warning="true" (closed)="alertMsg = ''"></onos-flash>
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
+    <onos-confirm title="{{ lionFn('dlg_confirm_action') }}" message="{{ confirmMsg }}" warning="{{ strongWarning }}" (chosen)="dOk($event)"></onos-confirm>
     <div class="tabular-header">
-        <onos-flash id="appMsgFlash" message="{{ alertMsg }}" dwell="5000" warning="true" (closed)="alertMsg = ''"></onos-flash>
-        <onos-confirm title="{{ lionFn('dlg_confirm_action') }}" message="{{ confirmMsg }}" warning="{{ strongWarning }}" (chosen)="dOk($event)"></onos-confirm>
         <h2>
             {{lionFn('title_apps')}}
             ({{ tableData.length }}
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts
index 5864743..3e541bb 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts
@@ -25,16 +25,14 @@
     FnService,
     IconService,
     LionService,
-    LoadingService,
     LogService,
-    TableBaseImpl, TableResponse, TableFilter, SortParams, SortDir,
     UrlFnService,
     WebSocketService,
     TableFilterPipe,
     ConfirmComponent,
     FlashComponent,
     IconComponent,
-    ThemeService,
+    ThemeService, LoadingComponent,
 } from 'gui2-fw-lib';
 
 import { AppsComponent } from './apps.component';
@@ -57,12 +55,6 @@
     loadIconDef() { }
 }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-    waiting() { }
-}
-
 class MockThemeService { }
 
 class MockUrlFnService { }
@@ -118,7 +110,8 @@
                 IconComponent,
                 AppsDetailsComponent,
                 TableFilterPipe,
-                FlashComponent
+                FlashComponent,
+                LoadingComponent
             ],
             providers: [
                 { provide: FnService, useValue: fs },
@@ -133,7 +126,6 @@
                         };
                     })
                 },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: LogService, useValue: logSpy },
                 { provide: ThemeService, useClass: MockThemeService },
                 { provide: UrlFnService, useClass: MockUrlFnService },
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts
index c933053..59d91ed 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts
@@ -14,18 +14,16 @@
  * limitations under the License.
  */
 import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 
 import {
     FnService,
     IconService,
     LionService,
-    LoadingService,
     LogService,
-    TableBaseImpl, TableResponse, TableFilter, SortParams, SortDir,
+    TableBaseImpl, TableResponse, SortDir,
     UrlFnService,
-    WebSocketService,
-    TableFilterPipe
+    WebSocketService
 } from 'gui2-fw-lib';
 
 const INSTALLED = 'INSTALLED';
@@ -133,14 +131,13 @@
         protected fs: FnService,
         private is: IconService,
         private lion: LionService,
-        protected ls: LoadingService,
         protected log: LogService,
         private ufs: UrlFnService,
         protected wss: WebSocketService,
         @Inject('Window') private window: Window,
         private httpClient: HttpClient
     ) {
-        super(fs, null, log, wss, 'app');
+        super(fs, log, wss, 'app');
         this.responseCallback = this.appResponseCb;
         this.parentSelCb =  this.rowSelection;
         // pre-populate sort so active apps are at the top of the list
diff --git a/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts
index d01d409..0aa6c7c 100644
--- a/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts
@@ -18,7 +18,6 @@
 import {
     FnService,
     LionService,
-    LoadingService,
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
@@ -66,12 +65,11 @@
     lionFn; // Function
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService,
         protected lion: LionService,
     ) {
-        super(fs, ls, log, wss, 'app');
+        super(fs, log, wss, 'app');
         if (this.lion.ubercache.length === 0) {
             this.lionFn = this.dummyLion;
             this.lion.loadCbs.set('appsdetails', () => this.doLion());
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts b/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts
index 17e5842..80fec4d 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts
+++ b/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts
@@ -19,7 +19,6 @@
     LogService,
     MastService,
     DetailsPanelBaseImpl,
-    LoadingService,
     IconService,
     LionService,
     PanelService,
@@ -87,7 +86,6 @@
     lionFn; // Function
 
     constructor(protected fs: FnService,
-                protected ls: LoadingService,
                 protected is: IconService,
                 protected lion: LionService,
                 protected wss: WebSocketService,
@@ -96,7 +94,7 @@
                 protected ps: PanelService,
                 protected el: ElementRef,
                 @Inject('Window') private w: Window) {
-        super(fs, ls, log, wss, 'cluster');
+        super(fs, log, wss, 'cluster');
 
         if (this.lion.ubercache.length === 0) {
             this.lionFn = this.dummyLion;
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.html b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.html
index 1bd61ec..1917d02 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.html
+++ b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-cluster">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>
             {{lionFn('title_cluster_nodes')}}
@@ -69,4 +70,4 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.spec.ts b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.spec.ts
index 4756b4e..6e976b4 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.spec.ts
@@ -19,7 +19,6 @@
 
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
     IconComponent,
@@ -27,7 +26,7 @@
     GlyphService,
     MastService,
     NavService,
-    ThemeService,
+    ThemeService, LoadingComponent,
 
 } from 'gui2-fw-lib';
 
@@ -54,14 +53,6 @@
 class MockGlyphService {
 }
 
-class MockLoadingService {
-    startAnim() {
-    }
-
-    stop() {
-    }
-}
-
 class MockNavService {
 }
 
@@ -116,12 +107,11 @@
 
         TestBed.configureTestingModule({
             imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
-            declarations: [ClusterComponent, IconComponent],
+            declarations: [ClusterComponent, IconComponent, LoadingComponent],
             providers: [
                 {provide: FnService, useValue: fs},
                 {provide: IconService, useClass: MockIconService},
                 {provide: GlyphService, useClass: MockGlyphService},
-                {provide: LoadingService, useClass: MockLoadingService},
                 {provide: MastService, useClass: MockMastService},
                 {provide: NavService, useClass: MockNavService},
                 {provide: LogService, useValue: logSpy},
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.ts b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.ts
index f72b1d0..ee74446 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.ts
+++ b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.ts
@@ -16,7 +16,6 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
     LionService,
@@ -59,12 +58,11 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected lion: LionService,
         protected wss: WebSocketService,
     ) {
-        super(fs, ls, log, wss, 'cluster');
+        super(fs, log, wss, 'cluster');
         this.responseCallback = this.clusterResponseCb;
 
         this.sortParams = {
diff --git a/web/gui2/src/main/webapp/app/view/device/device/device.component.html b/web/gui2/src/main/webapp/app/view/device/device/device.component.html
index 7a22076..237b611 100644
--- a/web/gui2/src/main/webapp/app/view/device/device/device.component.html
+++ b/web/gui2/src/main/webapp/app/view/device/device/device.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-device">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>Devices ({{ tableData.length }} total)</h2>
         <div class="ctrl-btns">
@@ -118,4 +119,4 @@
     </div>
 
     <onos-devicedetails class="floatpanels" id="{{ selId }}" (closeEvent)="deselectRow($event)"></onos-devicedetails>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/device/device/device.component.spec.ts b/web/gui2/src/main/webapp/app/view/device/device/device.component.spec.ts
index 44bb0c3..5b1355d 100644
--- a/web/gui2/src/main/webapp/app/view/device/device/device.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/device/device/device.component.spec.ts
@@ -25,13 +25,12 @@
     IconService,
     GlyphService,
     IconComponent,
-    LoadingService,
     LogService,
     NavService,
     MastService,
     TableFilterPipe,
     ThemeService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { of } from 'rxjs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -52,11 +51,6 @@
 
 class MockGlyphService { }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-}
-
 class MockNavService { }
 
 class MockMastService { }
@@ -100,12 +94,17 @@
 
         TestBed.configureTestingModule({
             imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
-            declarations: [DeviceComponent, IconComponent, TableFilterPipe, DeviceDetailsComponent],
+            declarations: [
+                DeviceComponent,
+                IconComponent,
+                TableFilterPipe,
+                DeviceDetailsComponent,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
                 { provide: GlyphService, useClass: MockGlyphService },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: MastService, useClass: MockMastService },
                 { provide: NavService, useClass: MockNavService },
                 { provide: LogService, useValue: logSpy },
diff --git a/web/gui2/src/main/webapp/app/view/device/device/device.component.ts b/web/gui2/src/main/webapp/app/view/device/device/device.component.ts
index e5b40c3..d810319 100644
--- a/web/gui2/src/main/webapp/app/view/device/device/device.component.ts
+++ b/web/gui2/src/main/webapp/app/view/device/device/device.component.ts
@@ -17,10 +17,8 @@
 
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
-    LionService,
     SortDir, TableBaseImpl, TableResponse
 } from 'gui2-fw-lib';
 
@@ -72,13 +70,12 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected as: ActivatedRoute,
         protected router: Router,
         protected wss: WebSocketService,
     ) {
-        super(fs, ls, log, wss, 'device');
+        super(fs, log, wss, 'device');
         this.responseCallback = this.deviceResponseCb;
 
         this.as.queryParams.subscribe(params => {
diff --git a/web/gui2/src/main/webapp/app/view/device/devicedetails/devicedetails.component.ts b/web/gui2/src/main/webapp/app/view/device/devicedetails/devicedetails.component.ts
index 0d0eedb..a5c750a 100644
--- a/web/gui2/src/main/webapp/app/view/device/devicedetails/devicedetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/device/devicedetails/devicedetails.component.ts
@@ -18,8 +18,6 @@
 import {
     FnService,
     IconService,
-    LionService,
-    LoadingService,
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
@@ -64,12 +62,11 @@
     @Input() id: string;
 
     constructor(protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected is: IconService,
         protected wss: WebSocketService
     ) {
-        super(fs, ls, log, wss, 'device');
+        super(fs, log, wss, 'device');
     }
 
     ngOnInit() {
diff --git a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.html b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.html
index a1b23df..a0b97b7 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.html
+++ b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-flow" xmlns="http://www.w3.org/1999/html">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>
             {{lionFn('title_flows')}} {{id}} ({{ tableData.length }} {{ lionFn('total') }})
@@ -133,4 +134,4 @@
         </div>
     </div>
     <onos-flowdetails class="floatpanels" flowId="{{ selId }}" appId="{{ selRowAppId }}" (closeEvent)="deselectRow($event)"></onos-flowdetails>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.spec.ts b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.spec.ts
index e049fcf..a758553 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.spec.ts
@@ -24,13 +24,12 @@
     GlyphService,
     IconComponent,
     LionService,
-    LoadingService,
     LogService,
     NavService,
     MastService,
     TableFilterPipe,
     ThemeService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -53,11 +52,6 @@
 
 class MockGlyphService { }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-}
-
 class MockNavService { }
 
 class MockMastService { }
@@ -111,7 +105,13 @@
 
         TestBed.configureTestingModule({
             imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
-            declarations: [FlowComponent, IconComponent, TableFilterPipe, FlowDetailsComponent],
+            declarations: [
+                FlowComponent,
+                IconComponent,
+                TableFilterPipe,
+                FlowDetailsComponent,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
@@ -125,7 +125,6 @@
                         };
                     })
                 },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: MastService, useClass: MockMastService },
                 { provide: NavService, useClass: MockNavService },
                 { provide: LogService, useValue: logSpy },
diff --git a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.ts b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.ts
index 7a6c892..a54e0f6 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.ts
+++ b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.ts
@@ -17,7 +17,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
     LionService,
@@ -70,13 +69,12 @@
     pipeconfTip: string;
 
     constructor(protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected as: ActivatedRoute,
         protected wss: WebSocketService,
         protected lion: LionService,
     ) {
-        super(fs, ls, log, wss, 'flow');
+        super(fs, log, wss, 'flow');
         this.as.queryParams.subscribe(params => {
             this.id = params['devId'];
 
diff --git a/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts b/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts
index 36d1b34..fbb3592 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts
@@ -16,9 +16,7 @@
 import { Component, OnInit, OnDestroy, OnChanges, Input, Output, EventEmitter } from '@angular/core';
 import {
     FnService,
-    IconService,
     LionService,
-    LoadingService,
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
@@ -70,12 +68,11 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService,
         protected lion: LionService,
     ) {
-        super(fs, ls, log, wss, 'flow');
+        super(fs, log, wss, 'flow');
         if (this.lion.ubercache.length === 0) {
             this.lionFn = this.dummyLion;
             this.lion.loadCbs.set('flowdetails', () => this.doLion());
diff --git a/web/gui2/src/main/webapp/app/view/group/group/group.component.html b/web/gui2/src/main/webapp/app/view/group/group/group.component.html
index 4b0afbb..48f85e2 100644
--- a/web/gui2/src/main/webapp/app/view/group/group/group.component.html
+++ b/web/gui2/src/main/webapp/app/view/group/group/group.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-group" xmlns="http://www.w3.org/1999/html">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>
             Groups for Device {{id}} ({{tableData.length}} total)
@@ -121,4 +122,4 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/group/group/group.component.spec.ts b/web/gui2/src/main/webapp/app/view/group/group/group.component.spec.ts
index 2b0e4e6..c8bd2c8 100644
--- a/web/gui2/src/main/webapp/app/view/group/group/group.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/group/group/group.component.spec.ts
@@ -20,16 +20,12 @@
     ConsoleLoggerService,
     FnService,
     IconService,
-    GlyphService,
     IconComponent,
-    LoadingService,
     LogService,
-    NavService,
-    MastService,
     TableFilterPipe,
     ThemeService,
     UrlFnService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { ActivatedRoute, Params } from '@angular/router';
 import { of } from 'rxjs';
@@ -46,18 +42,10 @@
     }
 }
 
-class MockFnService { }
-
 class MockIconService {
     loadIconDef() { }
 }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-    waiting() { }
-}
-
 class MockThemeService { }
 
 class MockUrlFnService { }
@@ -108,11 +96,15 @@
 
         TestBed.configureTestingModule({
             imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
-            declarations: [GroupComponent, IconComponent, TableFilterPipe],
+            declarations: [
+                GroupComponent,
+                IconComponent,
+                TableFilterPipe,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: LogService, useValue: log },
                 { provide: ThemeService, useClass: MockThemeService },
                 { provide: UrlFnService, useClass: MockUrlFnService },
diff --git a/web/gui2/src/main/webapp/app/view/group/group/group.component.ts b/web/gui2/src/main/webapp/app/view/group/group/group.component.ts
index c7fa497..0d2efc5 100644
--- a/web/gui2/src/main/webapp/app/view/group/group/group.component.ts
+++ b/web/gui2/src/main/webapp/app/view/group/group/group.component.ts
@@ -16,10 +16,8 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
-    LionService,
     SortDir, TableBaseImpl, TableResponse
 } from 'gui2-fw-lib';
 import { ActivatedRoute } from '@angular/router';
@@ -67,11 +65,10 @@
     constructor(
         protected log: LogService,
         protected fs: FnService,
-        protected ls: LoadingService,
         protected wss: WebSocketService,
         protected ar: ActivatedRoute,
     ) {
-        super(fs, ls, log, wss, 'group');
+        super(fs, log, wss, 'group');
         this.ar.queryParams.subscribe(params => {
             this.id = params['devId'];
         });
diff --git a/web/gui2/src/main/webapp/app/view/host/host/host.component.html b/web/gui2/src/main/webapp/app/view/host/host/host.component.html
index 7c7e32c..d8e92f8 100644
--- a/web/gui2/src/main/webapp/app/view/host/host/host.component.html
+++ b/web/gui2/src/main/webapp/app/view/host/host/host.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-host">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>Hosts ({{tableData.length}} total)</h2>
         <div class="ctrl-btns">
@@ -73,4 +74,4 @@
         </div>
     </div>
     <onos-hostdetails class="floatpanels" id="{{ selId }}" (closeEvent)="deselectRow($event)"></onos-hostdetails>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/host/host/host.component.spec.ts b/web/gui2/src/main/webapp/app/view/host/host/host.component.spec.ts
index d482cb2..8cbf464 100644
--- a/web/gui2/src/main/webapp/app/view/host/host/host.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/host/host/host.component.spec.ts
@@ -22,16 +22,12 @@
 import {
     FnService,
     IconService,
-    GlyphService,
     IconComponent,
-    LoadingService,
     LogService,
-    NavService,
-    MastService,
     TableFilterPipe,
     ThemeService,
     UrlFnService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { HostComponent } from './host.component';
 import { HostDetailsComponent } from '../hostdetails/hostdetails.component';
@@ -45,8 +41,6 @@
     }
 }
 
-class MockFnService { }
-
 class MockIconService {
     loadIconDef() { }
 }
@@ -106,11 +100,16 @@
 
         TestBed.configureTestingModule({
             imports: [BrowserAnimationsModule, FormsModule],
-            declarations: [HostComponent, HostDetailsComponent, IconComponent, TableFilterPipe],
+            declarations: [
+                HostComponent,
+                HostDetailsComponent,
+                IconComponent,
+                TableFilterPipe,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: LogService, useValue: logSpy },
                 { provide: ThemeService, useClass: MockThemeService },
                 { provide: UrlFnService, useClass: MockUrlFnService },
diff --git a/web/gui2/src/main/webapp/app/view/host/host/host.component.ts b/web/gui2/src/main/webapp/app/view/host/host/host.component.ts
index 3ea91c7..bf692a2 100644
--- a/web/gui2/src/main/webapp/app/view/host/host/host.component.ts
+++ b/web/gui2/src/main/webapp/app/view/host/host/host.component.ts
@@ -16,7 +16,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
@@ -50,11 +49,10 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService,
     ) {
-        super(fs, ls, log, wss, 'host');
+        super(fs, log, wss, 'host');
         this.responseCallback = this.hostResponseCb;
         this.sortParams = {
             firstCol: 'name',
diff --git a/web/gui2/src/main/webapp/app/view/host/hostdetails/hostdetails.component.ts b/web/gui2/src/main/webapp/app/view/host/hostdetails/hostdetails.component.ts
index 18cf106..5e70270 100644
--- a/web/gui2/src/main/webapp/app/view/host/hostdetails/hostdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/host/hostdetails/hostdetails.component.ts
@@ -18,7 +18,6 @@
 import { trigger, state, style, animate, transition } from '@angular/animations';
 import {
     FnService,
-    LoadingService,
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
@@ -62,11 +61,10 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService
     ) {
-        super(fs, ls, log, wss, 'host');
+        super(fs, log, wss, 'host');
     }
 
     ngOnInit() {
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.html b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.html
index 98b2084..040b3c2 100644
--- a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.html
+++ b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-intent" xmlns="http://www.w3.org/1999/html">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <onos-flash id="intentActionFlash" message="{{ intentActionMsg }}"></onos-flash>
         <onos-confirm message="{{ warnMsg }}" (chosen)="dOk($event)"></onos-confirm>
@@ -106,4 +107,4 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.spec.ts b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.spec.ts
index 9a0a082..8a5a9a5 100644
--- a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.spec.ts
@@ -25,10 +25,9 @@
     IconComponent,
     ConfirmComponent,
     FlashComponent,
-    LoadingService,
     LogService,
     TableFilterPipe,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 
 import { of } from 'rxjs';
@@ -47,12 +46,6 @@
     loadIconDef() { }
 }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-    waiting() { }
-}
-
 class MockWebSocketService {
     createWebSocket() { }
     isConnected() { return false; }
@@ -92,11 +85,17 @@
         fs = new FnService(ar, logSpy, windowMock);
         TestBed.configureTestingModule({
             imports: [BrowserAnimationsModule, FormsModule],
-            declarations: [IntentComponent, IconComponent, TableFilterPipe, ConfirmComponent, FlashComponent],
+            declarations: [
+                IntentComponent,
+                IconComponent,
+                TableFilterPipe,
+                ConfirmComponent,
+                FlashComponent,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: LogService, useValue: logSpy },
                 { provide: WebSocketService, useClass: MockWebSocketService },
                 { provide: 'Window', useValue: windowMock },
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts
index 6719564..585514d 100644
--- a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts
+++ b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts
@@ -16,7 +16,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
@@ -88,10 +87,9 @@
     constructor(
         protected log: LogService,
         protected fs: FnService,
-        protected ls: LoadingService,
         protected wss: WebSocketService,
     ) {
-        super(fs, ls, log, wss, 'intent', 'key');
+        super(fs, log, wss, 'intent', 'key');
         this.responseCallback = this.intentResponseCb;
         this.parentSelCb = this.rowSelection;
         this.brief = true;
diff --git a/web/gui2/src/main/webapp/app/view/link/link/link.component.html b/web/gui2/src/main/webapp/app/view/link/link/link.component.html
index e90ede8..890a46b 100644
--- a/web/gui2/src/main/webapp/app/view/link/link/link.component.html
+++ b/web/gui2/src/main/webapp/app/view/link/link/link.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-link">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>Links ({{tableData.length}} total)</h2>
         <div class="ctrl-btns">
@@ -63,4 +64,4 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/link/link/link.component.spec.ts b/web/gui2/src/main/webapp/app/view/link/link/link.component.spec.ts
index c50ed46..d84a34e 100644
--- a/web/gui2/src/main/webapp/app/view/link/link/link.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/link/link/link.component.spec.ts
@@ -22,12 +22,12 @@
     FnService,
     IconService,
     IconComponent,
-    LoadingService,
     LogService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 class MockActivatedRoute extends ActivatedRoute {
     constructor(params: Params) {
@@ -40,12 +40,6 @@
     loadIconDef() { }
 }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-    waiting() { }
-}
-
 class MockWebSocketService {
     createWebSocket() { }
     isConnected() { return false; }
@@ -83,11 +77,15 @@
         fs = new FnService(ar, logSpy, windowMock);
 
         TestBed.configureTestingModule({
-            declarations: [LinkComponent, IconComponent],
+            imports: [BrowserAnimationsModule],
+            declarations: [
+                LinkComponent,
+                IconComponent,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: LogService, useValue: logSpy },
                 { provide: WebSocketService, useClass: MockWebSocketService },
             ]
diff --git a/web/gui2/src/main/webapp/app/view/link/link/link.component.ts b/web/gui2/src/main/webapp/app/view/link/link/link.component.ts
index 3e0b21f..fe3da34 100644
--- a/web/gui2/src/main/webapp/app/view/link/link/link.component.ts
+++ b/web/gui2/src/main/webapp/app/view/link/link/link.component.ts
@@ -16,7 +16,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
@@ -53,11 +52,10 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService,
     ) {
-        super(fs, ls, log, wss, 'link');
+        super(fs, log, wss, 'link');
         this.responseCallback = this.linkResponseCb;
         this.sortParams = {
             firstCol: 'one',
diff --git a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.html b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.html
index bfeb407..b5cb7a9 100644
--- a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.html
+++ b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-meter">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2> Meter for Device {{id}} ({{tableData.length}} Total )</h2>
 
@@ -98,4 +99,4 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.spec.ts b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.spec.ts
index 1337cb8..6a298cf 100644
--- a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.spec.ts
@@ -23,17 +23,13 @@
 import {
     FnService,
     IconService,
-    GlyphService,
     IconComponent,
     LionService,
-    LoadingService,
     LogService,
-    NavService,
-    MastService,
     TableFilterPipe,
     ThemeService,
     UrlFnService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { of, Subject } from 'rxjs';
 import { } from 'jasmine';
@@ -54,12 +50,6 @@
     loadIconDef() { }
 }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-    waiting() { }
-}
-
 class MockThemeService { }
 
 class MockUrlFnService { }
@@ -117,7 +107,12 @@
 
         TestBed.configureTestingModule({
             imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
-            declarations: [MeterComponent, IconComponent, TableFilterPipe],
+            declarations: [
+                MeterComponent,
+                IconComponent,
+                TableFilterPipe,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
@@ -130,7 +125,6 @@
                         };
                     })
                 },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: LogService, useValue: logSpy },
                 { provide: ThemeService, useClass: MockThemeService },
                 { provide: UrlFnService, useClass: MockUrlFnService },
diff --git a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.ts b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.ts
index b534c0a..914e062 100644
--- a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.ts
+++ b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.ts
@@ -16,7 +16,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
@@ -66,11 +65,10 @@
     constructor(
         protected fs: FnService,
         protected log: LogService,
-        protected ls: LoadingService,
         protected as: ActivatedRoute,
         protected wss: WebSocketService,
     ) {
-        super(fs, ls, log, wss, 'meter');
+        super(fs, log, wss, 'meter');
         this.as.queryParams.subscribe(params => {
             this.id = params['devId'];
         });
diff --git a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.html b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.html
index 0adac19..f3e7927 100644
--- a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.html
+++ b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-partition">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>Partitions ({{tableData.length}} total)</h2>
         <div class="ctrl-btns">
@@ -53,4 +54,4 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.spec.ts b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.spec.ts
index ff43f9e..2757283 100644
--- a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.spec.ts
@@ -21,14 +21,14 @@
     FnService,
     IconService,
     IconComponent,
-    LoadingService,
     LogService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { of } from 'rxjs';
 import { } from 'jasmine';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PartitionComponent } from './partition.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 class MockActivatedRoute extends ActivatedRoute {
     constructor(params: Params) {
@@ -41,12 +41,6 @@
     loadIconDef() { }
 }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-    waiting() { }
-}
-
 class MockWebSocketService {
     createWebSocket() { }
     isConnected() { return false; }
@@ -83,11 +77,14 @@
         fs = new FnService(ar, logSpy, windowMock);
 
         TestBed.configureTestingModule({
-            imports: [RouterTestingModule],
-            declarations: [PartitionComponent, IconComponent],
+            imports: [BrowserAnimationsModule, RouterTestingModule],
+            declarations: [
+                PartitionComponent,
+                IconComponent,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: IconService, useClass: MockIconService },
                 { provide: LogService, useValue: logSpy },
                 { provide: WebSocketService, useClass: MockWebSocketService },
diff --git a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.ts b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.ts
index aec5e85..f8518a4 100644
--- a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.ts
+++ b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.ts
@@ -16,10 +16,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
-    SortDir, TableBaseImpl, TableResponse
+    SortDir, TableBaseImpl
 } from 'gui2-fw-lib';
 import { ActivatedRoute } from '@angular/router';
 
@@ -36,11 +35,10 @@
     constructor(
         protected fs: FnService,
         protected log: LogService,
-        protected ls: LoadingService,
         protected as: ActivatedRoute,
         protected wss: WebSocketService,
     ) {
-        super(fs, ls, log, wss, 'partition');
+        super(fs, log, wss, 'partition');
         this.sortParams = {
             firstCol: 'name',
             firstDir: SortDir.desc,
diff --git a/web/gui2/src/main/webapp/app/view/port/port/port.component.html b/web/gui2/src/main/webapp/app/view/port/port/port.component.html
index 8625d1a..32501b6 100644
--- a/web/gui2/src/main/webapp/app/view/port/port/port.component.html
+++ b/web/gui2/src/main/webapp/app/view/port/port/port.component.html
@@ -15,6 +15,7 @@
 -->
 <!-- Port partial HTML -->
 <div id="ov-port">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>
             Ports for Device {{devId}} ({{tableData.length}} Total)
@@ -133,4 +134,4 @@
         </div>
         <onos-portdetails class="floatpanels" id="{{ selId }}" devId="{{devId}}" (closeEvent)="deselectRow($event)"></onos-portdetails>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/port/port/port.component.spec.ts b/web/gui2/src/main/webapp/app/view/port/port/port.component.spec.ts
index a53bd1c..0f230c4 100644
--- a/web/gui2/src/main/webapp/app/view/port/port/port.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/port/port/port.component.spec.ts
@@ -24,14 +24,13 @@
     IconService,
     GlyphService,
     IconComponent,
-    LoadingService,
     LogService,
     NavService,
     MastService,
     PrefsService,
     TableFilterPipe,
     ThemeService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';
@@ -39,6 +38,7 @@
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { PortDetailsComponent } from '../portdetails/portdetails.component';
+
 class MockActivatedRoute extends ActivatedRoute {
     constructor(params: Params) {
         super();
@@ -59,11 +59,6 @@
 
 class MockGlyphService { }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-}
-
 class MockNavService { }
 
 class MockMastService { }
@@ -110,12 +105,17 @@
 
         TestBed.configureTestingModule({
             imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
-            declarations: [PortComponent, IconComponent, TableFilterPipe, PortDetailsComponent],
+            declarations: [
+                PortComponent,
+                IconComponent,
+                TableFilterPipe,
+                PortDetailsComponent,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
                 { provide: GlyphService, useClass: MockGlyphService },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: MastService, useClass: MockMastService },
                 { provide: NavService, useClass: MockNavService },
                 { provide: PrefsService, useClass: MockPrefsService },
diff --git a/web/gui2/src/main/webapp/app/view/port/port/port.component.ts b/web/gui2/src/main/webapp/app/view/port/port/port.component.ts
index 0dcd114..1c66459 100644
--- a/web/gui2/src/main/webapp/app/view/port/port/port.component.ts
+++ b/web/gui2/src/main/webapp/app/view/port/port/port.component.ts
@@ -16,7 +16,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     PrefsService,
     WebSocketService,
@@ -82,13 +81,12 @@
     toggleNZTip = 'Toggle non zero port statistics';
 
     constructor(protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected ar: ActivatedRoute,
         protected wss: WebSocketService,
         protected prefs: PrefsService,
     ) {
-        super(fs, ls, log, wss, 'port');
+        super(fs, log, wss, 'port');
         this.ar.queryParams.subscribe(params => {
             this.devId = params['devId'];
 
diff --git a/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.ts b/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.ts
index 0960cd6..76b628e 100644
--- a/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.ts
@@ -18,7 +18,6 @@
 import {
     FnService,
     IconService,
-    LoadingService,
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
@@ -60,12 +59,11 @@
     @Input() devId: string;
 
     constructor(protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected is: IconService,
         protected wss: WebSocketService
     ) {
-        super(fs, ls, log, wss, 'port');
+        super(fs, log, wss, 'port');
     }
 
     ngOnInit() {
diff --git a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.html b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.html
index 7073556..e8e13c5 100644
--- a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.html
+++ b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-processor">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>
             Packet Processors ({{tableData.length}} Processors total)
@@ -53,4 +54,4 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.spec.ts b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.spec.ts
index 53ad34c..9bc989f 100644
--- a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.spec.ts
@@ -21,15 +21,15 @@
     FnService,
     IconService,
     IconComponent,
-    LoadingService,
     LogService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { of } from 'rxjs';
 import { } from 'jasmine';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { ProcessorComponent } from './processor.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 class MockActivatedRoute extends ActivatedRoute {
     constructor(params: Params) {
@@ -43,12 +43,6 @@
     loadIconDef() { }
 }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-    waiting() { }
-}
-
 class MockWebSocketService {
     createWebSocket() { }
     isConnected() { return false; }
@@ -88,11 +82,14 @@
         fs = new FnService(ar, logSpy, windowMock);
 
         TestBed.configureTestingModule({
-            imports: [RouterTestingModule],
-            declarations: [ProcessorComponent, IconComponent],
+            imports: [BrowserAnimationsModule, RouterTestingModule],
+            declarations: [
+                ProcessorComponent,
+                IconComponent,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: IconService, useClass: MockIconService },
                 { provide: LogService, useValue: logSpy },
                 { provide: WebSocketService, useClass: MockWebSocketService },
diff --git a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.ts b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.ts
index a42912f..6b0a9bc 100644
--- a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.ts
+++ b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.ts
@@ -16,10 +16,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
-    SortDir, TableBaseImpl, TableResponse
+    TableBaseImpl
 } from 'gui2-fw-lib';
 import { ActivatedRoute } from '@angular/router';
 
@@ -36,11 +35,10 @@
     constructor(
         protected fs: FnService,
         protected log: LogService,
-        protected ls: LoadingService,
         protected as: ActivatedRoute,
         protected wss: WebSocketService,
     ) {
-        super(fs, ls, log, wss, 'processor');
+        super(fs, log, wss, 'processor');
     }
 
     ngOnInit() {
diff --git a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.html b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.html
index 7f88b51..65cae49 100644
--- a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.html
+++ b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-settings">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>Component Settings ({{tableData.length}} total)</h2>
         <div class="ctrl-btns">
@@ -60,4 +61,4 @@
         </div>
     </div>
     <onos-settingsdetails class="floatpanels" id="{{ selId }}" [settingsDetails]="settingsDetails" (closeEvent)="deselectRow($event)"></onos-settingsdetails>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.spec.ts b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.spec.ts
index 7e0d8de..5ae73ce 100644
--- a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.spec.ts
@@ -22,9 +22,8 @@
     FnService,
     IconService,
     IconComponent,
-    LoadingService,
     LogService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
@@ -42,12 +41,6 @@
     loadIconDef() { }
 }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-    waiting() { }
-}
-
 class MockWebSocketService {
     createWebSocket() { }
     isConnected() { return false; }
@@ -85,11 +78,15 @@
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [BrowserAnimationsModule],
-            declarations: [SettingsComponent, IconComponent, SettingsDetailsComponent],
+            declarations: [
+                SettingsComponent,
+                IconComponent,
+                SettingsDetailsComponent,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: LogService, useValue: logSpy },
                 { provide: WebSocketService, useClass: MockWebSocketService },
             ]
diff --git a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.ts b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.ts
index a2bf6c4..b2444ad 100644
--- a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.ts
+++ b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.ts
@@ -16,7 +16,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
@@ -57,11 +56,10 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService
     ) {
-        super(fs, ls, log, wss, 'setting');
+        super(fs, log, wss, 'setting');
         this.responseCallback = this.settingsResponseCb;
         this.parentSelCb = this.rowSelection;
 
diff --git a/web/gui2/src/main/webapp/app/view/settings/settingsdetails/settingsdetails.component.ts b/web/gui2/src/main/webapp/app/view/settings/settingsdetails/settingsdetails.component.ts
index 39cc9b8..6497e5d 100644
--- a/web/gui2/src/main/webapp/app/view/settings/settingsdetails/settingsdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/settings/settingsdetails/settingsdetails.component.ts
@@ -16,8 +16,6 @@
 import { Component, OnInit, Input, OnDestroy, OnChanges } from '@angular/core';
 import {
     FnService,
-    IconService,
-    LoadingService,
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
@@ -63,11 +61,10 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService
     ) {
-        super(fs, ls, log, wss, 'setting');
+        super(fs, log, wss, 'setting');
     }
 
     ngOnInit() {
diff --git a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.html b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.html
index 5829acf..2984d3e 100644
--- a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.html
+++ b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.html
@@ -14,6 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="ov-tunnel">
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
     <div class="tabular-header">
         <h2>Tunnels ({{tableData.length}} total)</h2>
         <div class="ctrl-btns">
@@ -71,4 +72,4 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.spec.ts b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.spec.ts
index 30c5ead..f5ab3d6 100644
--- a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.spec.ts
@@ -22,12 +22,12 @@
     FnService,
     IconService,
     IconComponent,
-    LoadingService,
     LogService,
-    WebSocketService
+    WebSocketService, LoadingComponent
 } from 'gui2-fw-lib';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 class MockActivatedRoute extends ActivatedRoute {
     constructor(params: Params) {
@@ -40,12 +40,6 @@
     loadIconDef() { }
 }
 
-class MockLoadingService {
-    startAnim() { }
-    stop() { }
-    waiting() { }
-}
-
 class MockWebSocketService {
     createWebSocket() { }
     isConnected() { return false; }
@@ -83,11 +77,15 @@
         fs = new FnService(ar, logSpy, windowMock);
 
         TestBed.configureTestingModule({
-            declarations: [TunnelComponent, IconComponent],
+            imports: [BrowserAnimationsModule],
+            declarations: [
+                TunnelComponent,
+                IconComponent,
+                LoadingComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: IconService, useClass: MockIconService },
-                { provide: LoadingService, useClass: MockLoadingService },
                 { provide: LogService, useValue: logSpy },
                 { provide: WebSocketService, useClass: MockWebSocketService },
             ]
diff --git a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.ts b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.ts
index 388e69e..91eb7e6 100644
--- a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.ts
+++ b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.ts
@@ -16,7 +16,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
     FnService,
-    LoadingService,
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
@@ -55,11 +54,10 @@
 
     constructor(
         protected fs: FnService,
-        protected ls: LoadingService,
         protected log: LogService,
         protected wss: WebSocketService,
     ) {
-        super(fs, ls, log, wss, 'tunnel');
+        super(fs, log, wss, 'tunnel');
         this.responseCallback = this.tunnelResponseCb;
         this.sortParams = {
             firstCol: 'id',
diff --git a/web/gui2/src/main/webapp/index.html b/web/gui2/src/main/webapp/index.html
index f50331b..d71afe9 100644
--- a/web/gui2/src/main/webapp/index.html
+++ b/web/gui2/src/main/webapp/index.html
@@ -24,7 +24,6 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link href="app/fw/layer/loading.service.css" rel='stylesheet' type='text/css'>
     <base href="/">
     <title>ONOS</title>