diff --git a/src/app/@theme/layouts/one-column/one-column.layout.ts b/src/app/@theme/layouts/one-column/one-column.layout.ts
index cc0b789a59901c1e4be24642cc4a5f63937397d1..99a51fb27a72864beda0ec2b0274628717daf8ff 100644
--- a/src/app/@theme/layouts/one-column/one-column.layout.ts
+++ b/src/app/@theme/layouts/one-column/one-column.layout.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
         <ngx-header></ngx-header>
       </nb-layout-header>
 
-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive style="z-index:999">
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6382d50dfbc81a6cd579220a6872accb1290a78f..be08f901d19a232575c94498652634d07061231b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -30,6 +30,7 @@
  import { AuthGuard } from './auth/services/auth.guard';
  import { AuthLogoutComponent } from './auth/logout/auth-logout.component';
  import { MarkdownModule } from 'ngx-markdown';
+ import { UiFeaturesModule } from './pages/ui-features/ui-features.module';
  
  import { ChartModule } from 'angular2-chartjs';
  import 'chartjs-plugin-zoom';
@@ -53,6 +54,7 @@ import { DatastorageService } from './pages/dashboard-management/services/datast
      BrowserAnimationsModule,
      HttpClientModule,
      AppRoutingModule,
+     UiFeaturesModule,
      NbSidebarModule.forRoot(),
      NbMenuModule.forRoot(),
      NbDatepickerModule.forRoot(),
diff --git a/src/app/auth/services/token.interceptor.ts b/src/app/auth/services/token.interceptor.ts
index 6221d0d71e33be8884f40fca04e86ff66d228b37..05a3735dc685e50dd9d9f4e3e42c2f61e4ff5c9c 100644
--- a/src/app/auth/services/token.interceptor.ts
+++ b/src/app/auth/services/token.interceptor.ts
@@ -8,25 +8,30 @@ import {
 import { Observable } from 'rxjs';
 import { NbAuthOAuth2JWTToken, NbAuthOAuth2Token, NbAuthService } from '@nebular/auth';
 import { ConfigService } from '@ngx-config/core';
-import { switchMap, tap } from 'rxjs/operators';
+import { finalize, switchMap, tap } from 'rxjs/operators';
+import { LoaderService } from '../../services/loader.service';
 
 @Injectable()
 export class TokenInterceptor implements HttpInterceptor {
 
   token;
-  constructor(public auth: NbAuthService, public config:ConfigService) {}
+  constructor(public auth: NbAuthService, public config:ConfigService, public loaderService:LoaderService) {}
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    this.loaderService.show();
     if (req.url.indexOf('/assets/') > -1) {
-      return next.handle(req);
+      return next.handle(req).pipe(
+        finalize(() => this.loaderService.hide()));
     }
 
     if (req.url.indexOf('/oauth2/token') > -1 || req.url.indexOf('/openid-connect/token') > -1 || req.url.indexOf('/api/menu-blocks') > -1|| req.url.indexOf('/public/dashboards') > -1) {
-      return next.handle(req);
+      return next.handle(req).pipe(
+        finalize(() => this.loaderService.hide()));
     }
 
     if (req.url.indexOf(this.config.getSettings('idra_base_url')+'/Idra') > -1) {
-      return next.handle(req);
+      return next.handle(req).pipe(
+        finalize(() => this.loaderService.hide()));
     }
 
     
@@ -45,12 +50,14 @@ export class TokenInterceptor implements HttpInterceptor {
             newHeaders = newHeaders.append('Authorization', 'Bearer ' + this.token.getPayload().access_token);
           }
           const authReq = req.clone({ headers: newHeaders });
-          return next.handle(authReq);
+          return next.handle(authReq).pipe(
+            finalize(() => this.loaderService.hide()));
         })
       ) 
     } else {
       const authReq = req.clone({ headers: newHeaders });
-      return next.handle(authReq);
+      return next.handle(authReq).pipe(
+        finalize(() => this.loaderService.hide()));
     }
 
   }
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index f1258a97cf91321e67cfb9ad67ca717afce0a32b..0870ac010bbea02dd48061a907fcd2f7ac4bbc3b 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -12,6 +12,7 @@ import { MENU_ITEMS } from './pages-menu';
   selector: 'ngx-pages',
   styleUrls: ['pages.component.scss'],
   template: `
+  <ngx-loader></ngx-loader>
     <ngx-one-column-layout>
       <nb-menu [items]="menu"></nb-menu>
       <router-outlet></router-outlet>
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 0c8e3bd5a49bd02618e7d8bcbf039f694504c9d4..c1062fb56889fd219c283fb19f53351303c0e2ea 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { UtilitiesComponent } from './utilities/utilities.component';
 import { MapLayersComponent } from './map-layers/map-layers.component';
 import { GuideComponent } from './guide/guide.component';
+import { UiFeaturesModule } from './ui-features/ui-features.module';
 
 
 @NgModule({
@@ -20,6 +21,7 @@ import { GuideComponent } from './guide/guide.component';
     MiscellaneousModule,
     TranslateModule,
     NbStepperModule,
+    UiFeaturesModule
   ],
   declarations: [
     PagesComponent,
diff --git a/src/app/pages/ui-features/loader/loader.component.html b/src/app/pages/ui-features/loader/loader.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..e44b9b11b327c11e4a182e94e5e8fc4ca7885342
--- /dev/null
+++ b/src/app/pages/ui-features/loader/loader.component.html
@@ -0,0 +1,13 @@
+<!--<div class="overlay"  *ngIf="isLoadingValue" [nbSpinner]="true" nbSpinnerSize="giant" nbSpinnerStatus="primary">
+ 
+</div>-->
+
+<style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3;background: rgba(254, 253, 253, 0.8);overflow:hidden}  .spinner div:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(19,153,114,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite}  .spinner div:first-child:after,.spinner div:first-child:before{content:'';position:absolute;border-radius:50%}  .spinner div:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(234,206,0);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}  .spinner div:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(244,230,127,1);animation:spin 1.5s linear infinite}</style>
+  <div  id="nb-global-spinner" class="spinner"  *ngIf="isLoadingValue">
+    <div class="blob blob-0"></div>
+    <div class="blob blob-1"></div>
+    <div class="blob blob-2"></div>
+    <div class="blob blob-3"></div>
+    <div class="blob blob-4"></div>
+    <div class="blob blob-5"></div>
+  </div>
diff --git a/src/app/pages/ui-features/loader/loader.component.scss b/src/app/pages/ui-features/loader/loader.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d83145c8577182af6aa7190473c7e35ea48f351d
--- /dev/null
+++ b/src/app/pages/ui-features/loader/loader.component.scss
@@ -0,0 +1,12 @@
+.overlay {
+    position: fixed;
+   // display: block;
+    width: 100%;
+    height: 100%;
+    top: 0;
+     left: 0;
+    background-color: rgba(202, 202, 202, 0.8);
+  //background-color: red;
+    z-index: 3;
+    // z-index: 99999;
+   }
\ No newline at end of file
diff --git a/src/app/pages/ui-features/loader/loader.component.spec.ts b/src/app/pages/ui-features/loader/loader.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3c9400fef1e90eb273e5d694025b38e869c74ca4
--- /dev/null
+++ b/src/app/pages/ui-features/loader/loader.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/ui-features/loader/loader.component.ts b/src/app/pages/ui-features/loader/loader.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10e265796411f31c86234b5689a1d621e9b33390
--- /dev/null
+++ b/src/app/pages/ui-features/loader/loader.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit,ChangeDetectionStrategy, SimpleChanges, ChangeDetectorRef } from '@angular/core';
+import { LoaderService } from '../../../services/loader.service';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { threadId } from 'worker_threads';
+
+@Component({
+  selector: 'ngx-loader',
+  templateUrl: './loader.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+  
+  isLoading;
+  noLoader;
+
+
+  constructor(private loaderService: LoaderService, private changeDetectorRef: ChangeDetectorRef) {
+
+    changeDetectorRef.detach();
+        setInterval(() => { this.changeDetectorRef.detectChanges(); }, 500);
+   }
+   get isLoadingValue(){
+    return this.isLoading;
+}
+
+ngOnInit(): void {
+  this.loaderService.loader.subscribe(color => {console.log(color);
+    this.isLoading = color;
+    // 
+     });
+     this.changeDetectorRef.detectChanges();
+  //this.isLoading =  this.loaderService.isLoading$.getValue();
+}
+
+}
diff --git a/src/app/pages/ui-features/ui-features.module.ts b/src/app/pages/ui-features/ui-features.module.ts
index 24788e9149a857e22c8aa1cbea4715cadc71d9e3..f096d6772f21e496c7d4a0f66818e898fac5497f 100644
--- a/src/app/pages/ui-features/ui-features.module.ts
+++ b/src/app/pages/ui-features/ui-features.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { NbAlertModule, NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule } from '@nebular/theme';
+import { NbAlertModule, NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule, NbSpinnerModule } from '@nebular/theme';
 
 import { ThemeModule } from '../../@theme/theme.module';
 import { UiFeaturesRoutingModule } from './ui-features-routing.module';
@@ -7,12 +7,16 @@ import { UiFeaturesComponent } from './ui-features.component';
 import { GridComponent } from './grid/grid.component';
 import { IconsComponent } from './icons/icons.component';
 import { TypographyComponent } from './typography/typography.component';
+import { LoaderComponent } from './loader/loader.component';
+
 
 const components = [
   UiFeaturesComponent,
   GridComponent,
   IconsComponent,
   TypographyComponent,
+  LoaderComponent
+  
 ];
 
 @NgModule({
@@ -24,9 +28,13 @@ const components = [
     NbAlertModule,
     ThemeModule,
     UiFeaturesRoutingModule,
+    NbSpinnerModule
   ],
   declarations: [
     ...components,
+
+  ],
+  exports: [ ...components,
   ],
 })
 export class UiFeaturesModule { }
diff --git a/src/app/services/loader.service.spec.ts b/src/app/services/loader.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aef696199092917d53ea5934776a2a0d22f530d5
--- /dev/null
+++ b/src/app/services/loader.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoaderService } from './loader.service';
+
+describe('LoaderService', () => {
+  let service: LoaderService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoaderService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/loader.service.ts b/src/app/services/loader.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1a0ca84fcb4b78a9d557b3288fa994c690f1463f
--- /dev/null
+++ b/src/app/services/loader.service.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoaderService {
+  isLoading$ = new BehaviorSubject<boolean>(false);
+  loader = this.isLoading$.asObservable();
+
+
+  constructor() { }
+
+  show() {
+    this.isLoading$.next(true);
+   
+ }
+
+ hide() {
+    this.isLoading$.next(false);
+ 
+    
+  }
+}