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');
                     }