Avoid wrong click.

[fanuelson]

Just an enhancement.

[TwanoO67]

Hello,

How are we supposed to use the AppLoadingComponent ?
Can you provide Example ?

[fabioformosa]

It seems he encapsuled in an exportable component the black squares that animate during app loading. He got them from bootstrapping-ngx-admin-lte (index.html).
I think it's not a bad idea, but the question is: if app is not initialized yet, how can those squares displayed? It needs to be tried, I've some doubts.

[fanuelson]

Hello,
@fabioformosa, @TwanoO67
Yes fabio. I did something like that but with a different loading style component.
Here is an example of use.
I use AppLoadingComponent out of the 'AuthComponent'.
I use it in AppComponent:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  isLoading = true;

    constructor(public router: Router) {
        router.events.subscribe((event: RouterEvent) => {
            this.navigationInterceptor(event)
        })
    }

  navigationInterceptor(event: RouterEvent): void {

    if (event instanceof NavigationStart) {
      this.isLoading = true
    }
    if (event instanceof NavigationEnd) {
      this.isLoading = false
    }
    if (event instanceof NavigationCancel) {
      this.isLoading = false
    }
    if (event instanceof NavigationError) {
      this.isLoading = false
    }

  }
}

And here is the AppComponent HTML Example like bootstraping-ngx-admin-lte

<app-route-loading [loading]="isLoading" ></app-route-loading>
<router-outlet></router-outlet>

The component is in the ngx-admin-lte module, separeted from the form of how the users
will use it.
In this example i use the component in AppComponent but can use it in another way.

IMPORTANT: To really see the component in action, its good to create a resolve that makes
any http request that takes some time just to simulate a real scenario.

Observation: My english is bad. So sorry for any mistakes i've made.

[fabioformosa]

Ok, I understand. It would be great if loading template was customizable through ng-content and the squares were a fallback strategy.
The business logic of hide/show could be embedded in the loading component, couldn't it?

[fanuelson]

Yeah, It would be great if loading template was customizable through ng-content.

@fabioformosa
The business logic of hide/show could be embedded in the loading component, couldn't it?
i dont think that its a good idea. Its good to left the business logic to the user to create as he desire.

[fabioformosa]

If you give to the component the name AppLoadingComponent, the only possible logic seems to me a loader that freezes all app (handle the boolean "isLoading", apply a curtain, etc). Instead, I would like to define the style of loader.
If you have a component customizable in style and logic, likely it's would be almost empty and its name should be AComponentShallDoEverythingYouWant.

[fanuelson]

We can change the name to NgxAdminLteLoading.