How to navigate without global spinner in nebular?

Question

I working on the nebular ngrx-admin template. There is a global spinner. which is loading while navigating from the header to a new page(component). I want to hide that spinner(no needed while navigating or loading new pages) only for particular components.

My header has a link like as below

<nb-action class="control-item "><a class="nav-links" href="home">Home</a></nb-action>

Spinner in index.html

<div id="nb-global-spinner" class="spinner">
    <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>

I have tried the following methods,

Method: 1 in custom.component.ts

ngOnInit(): void {
    const el = document.getElementById('nb-global-spinner');
    if (el) {
      el.style['display'] = 'none';
    }
  }

Method: 2 in custom.component.scss

.spinner{
  display: none;
}

Answer 1

The spinner is showing only on clicking the below one

<nb-action class="control-item "><a class="nav-links" href="home">Home</a></nb-action>

I have fixed it by changing it as

<nb-action class="control-item "><a class="nav-links" [routerLink]="['/home']">Home</a></nb-action>

Href is the basic attribute provided by Html to navigate through pages which reloads the page on click.

routerLink is the attribute provided by angular to navigate to different components without reloading the page.

Answer 2

I found a working fix for this.

You need to comment out loading spinner style used in index.html

Answer 3

if .spinner is the name of the class of the nb-global-spinner component then in your css try:

.spinner ::ng-deep {
   display: none;
}

or just in case:

.spinner ::ng-deep {
   * {
      display: none;
   }
}