BusyIndicator: Doesnt work on page container

[Fruko]

Describe the bug
When busy indicator is used on the div with page-container class, it shifts the whole div if busy indicator is active

To Reproduce
Steps to reproduce the behavior:

1. Go to demo app and use this html and js for app component

<a href="#maincontent" class="skip-link" data-translate="text">SkipToMain</a>

<soho-icons *ngIf="!useUpliftIcons"></soho-icons>
<soho-icons-uplift *ngIf="useUpliftIcons"></soho-icons-uplift>

<soho-icons-empty *ngIf="!useUpliftIcons"></soho-icons-empty>
<soho-icons-empty-uplift *ngIf="useUpliftIcons"></soho-icons-empty-uplift>

<app-masthead-demo></app-masthead-demo>

<nav soho-application-menu class="is-personalizable" [filterable]="true" [openOnLarge]="false"
  [dismissOnClickMobile]="true" (menuVisibility)="onMenuVisibility($event)">
  <div soho-searchfield-wrapper>
    <label class="audible" for="application-menu-searchfield">Search</label>
    <input soho-searchfield id="application-menu-searchfield" [clearable]="true" />
  </div>
  <application-menu-demo></application-menu-demo>
</nav>
<div class="page-container no-scroll">
  <app-header-dynamic-demo></app-header-dynamic-demo>
  <div id="maincontent" class="page-container scrollable" role="main" soho-busyindicator [activated]="active$ | async" [blockUI]="true">
    <button soho-button="primary" (click)="click()">click me</button>
      <router-outlet></router-outlet>
  </div>
</div>
<div soho-personalize (changetheme)="onChangeTheme($event)"></div>

import {
  Component,
  HostBinding,
  ViewEncapsulation,
  ViewChild,
  AfterViewInit
} from '@angular/core';

import { HeaderDynamicDemoRefService } from './header/header-dynamic-demo-ref.service';
import {
  SohoPersonalizeDirective,
  SohoRenderLoopService,
  SohoApplicationMenuComponent
} from 'ids-enterprise-ng';
import {BehaviorSubject, Subject} from 'rxjs';

@Component({
  selector: 'body', // tslint:disable-line
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [ HeaderDynamicDemoRefService ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
  /**
   * Local Storage Key
   */
  private static IS_APPLICATION_MENU_OPEN_KEY = 'is-application-menu-open';

  @ViewChild(SohoApplicationMenuComponent, { static: true })
  public applicationMenu: SohoApplicationMenuComponent;

  @ViewChild(SohoPersonalizeDirective, { static: true }) personalize: SohoPersonalizeDirective;

  @HostBinding('class.no-scroll') get isNoScroll() { return true; }

  /**
   * Include the uplift icons only if required by the current theme, this
   * is not quite perfect, as we need to listen for the theme change here.
   * Maybe wrap all the icons into their own component?
   */
  public useUpliftIcons = false;
  public active$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  public personalizeOptions: SohoPersonalizeOptions = {};

  constructor(private readonly renderLoop: SohoRenderLoopService) {
    // Init render loop manually for Angular applications
    // Ensures requestAnimationFrame is running outside of Angular Zone
    this.renderLoop.start();
  }

  ngAfterViewInit(): void {

    /**
    * Note: If using an input like [triggers]="[ '.application-menu-trigger' ]"
    * hookup the app menu trigger once the afterViewInit is called. This will
    * ensure that the toolbar has had a chance to create the application-menu-trugger
    * button.
    * this.applicationMenu.triggers = [ '.application-menu-trigger' ];
    */
    if (this.isApplicationMenuOpen) {
      this.applicationMenu.openMenu(true, true);
    } else {
      this.applicationMenu.closeMenu();
    }
  }

  public get isApplicationMenuOpen(): boolean {
    const valueString = localStorage.getItem(AppComponent.IS_APPLICATION_MENU_OPEN_KEY);
    return valueString ? (valueString === 'true') : true;
  }

  public set isApplicationMenuOpen(open: boolean) {
    localStorage.setItem(AppComponent.IS_APPLICATION_MENU_OPEN_KEY, open ? 'true' : 'false');
  }

  onChangeTheme(ev: SohoPersonalizeEvent) {
    this.useUpliftIcons = ev.data.theme === 'theme-uplift-light'
      || ev.data.theme === 'theme-uplift-dark'
      || ev.data.theme === 'theme-uplift-contrast';
  }

  click() {
    this.active$.next(!this.active$.getValue());
    setTimeout(() => this.active$.next(false), 5 * 1000);
  }

  public onMenuVisibility(visible: boolean): void {
    if (this.isApplicationMenuOpen !== visible) {
      this.isApplicationMenuOpen = visible;
    }
  }
}

2. Click on "click me" button
3. See app getting shifted

Expected behavior
Busy indicator will not affter page layout

Version

• ids-enterprise-ng: 6.4.1

[bthharper]

Glad you raised this as I was going to raise this too.

[tmcconechy]

In this example/test we place it in the body of the page and it works well. https://master-enterprise.demo.design.infor.com/components/busyindicator/example-body.html

Perhaps that's an option. Not sure if we can guarantee all places where you place? Probably shouldn't be on the scrollable part.

[bthharper]

@tmcconechy - any news on if we can get this looked at, we get this quite a bit in our applications.

[tmcconechy]

Put it in next sprint to find some time to look

[janahintal]

QA Passed.
Verified in https://master-enterprise.demo.design.infor.com/components/busyindicator/test-on-maincontent.html?theme=uplift&variant=light&colors=0066D4