How to use the @clr/angular.ClrLoadingState.DEFAULT function in @clr/angular

import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.component";
import { MessageHandlerService } from "../../../shared/message-handler/message-handler.service";

@Component({
    selector: "new-scanner-modal",
    templateUrl: "new-scanner-modal.component.html",
    styleUrls: ['../../../common.scss']
})
export class NewScannerModalComponent {
    testMap: any = {};
    opened: boolean = false;
    @Output() notify = new EventEmitter();
    @ViewChild(NewScannerFormComponent, {static: true})
    newScannerFormComponent: NewScannerFormComponent;
    checkBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
    saveBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
    onTesting: boolean = false;
    onSaving: boolean = false;
    isEdit: boolean = false;
    originValue: any;
    uid: string;
    editScanner: Scanner;
    @ViewChild(InlineAlertComponent, { static: false }) inlineAlert: InlineAlertComponent;
    constructor(
        private configScannerService: ConfigScannerService,
        private msgHandler: MessageHandlerService
    ) {}
    open(): void {
        // reset
        this.opened = true;
        this.inlineAlert.close();
        this.testMap = {};

const MAIN_HTML_EXAMPLE = `
<button class="btn btn-info-outline">Validate</button>
<button class="btn btn-success-outline" type="submit">Submit</button>
`;


@Component({
    selector: "clr-buttons-demo-button-loading",
    templateUrl: "./button-loading.html",
    styleUrls: ["./buttons.demo.scss"]
})
export class ButtonLoadingDemo {
    mainTSExample = MAIN_TS_EXAMPLE;
    mainHTMLExample = MAIN_HTML_EXAMPLE;

    validateBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
    submitBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;

    validateDemo() {
        this.validateBtnState = ClrLoadingState.LOADING;
        setTimeout(() =&gt; this.validateBtnState = ClrLoadingState.SUCCESS, 1500);
    }

    submitDemo() {
        this.submitBtnState = ClrLoadingState.LOADING;
        setTimeout(() =&gt; this.submitBtnState = ClrLoadingState.DEFAULT, 1500);
    }
}

@Component({
    selector: 'hbr-vulnerabilities-grid',
    templateUrl: './result-grid.component.html',
    styleUrls: ['./scanning.scss']
})
export class ResultGridComponent implements OnInit {
    scanningResults: VulnerabilityItem[] = [];
    dataCache: VulnerabilityItem[] = [];
    loading: boolean = false;
    shouldShowLoading: boolean = true;
    @Input() tagId: string;
    @Input() repositoryId: string;
    @Input() projectId: number;
    hasScanImagePermission: boolean;
    hasEnabledScanner: boolean = false;
    scanBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
    severitySort: ClrDatagridComparatorInterface;
    constructor(
        private scanningService: ScanningResultService,
        private channel: ChannelService,
        private userPermissionService: UserPermissionService,
        private errorHandler: ErrorHandler,
    ) {
        const that = this;
        this.severitySort = {
            compare(a: VulnerabilityItem, b: VulnerabilityItem): number {
                return that.getLevel(a) - that.getLevel(b);
            }
        };
    }

    ngOnInit(): void {

() => {
        this.openSSH = false;
        this.installStep = 4;
        this.ignoreStep1 = true;
        this.ignoreStep2 = true;
        this.installProgress = 100;
        this.uninstallBtnState = ClrLoadingState.DEFAULT;
        this.submitBtnState = ClrLoadingState.DEFAULT;
      },
      (err: HttpErrorResponse) => {

setTimeout(() => {
      this.submitState = ClrLoadingState.DEFAULT;
    }, 1500);
  }

import { finalize } from "rxjs/operators";
import { WebhookService } from "../webhook.service";
import { WebhookEventTypes } from '../../../shared/shared.const';
import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.component";
import { MessageHandlerService } from "../../../shared/message-handler/message-handler.service";

@Component({
  selector: 'add-webhook-form',
  templateUrl: './add-webhook-form.component.html',
  styleUrls: ['./add-webhook-form.component.scss']
})
export class AddWebhookFormComponent implements OnInit, OnChanges {
  closable: boolean = true;
  staticBackdrop: boolean = true;
  checking: boolean = false;
  checkBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
  webhookForm: NgForm;
  submitting: boolean = false;
  webhookTarget: Target = new Target();

  @Input() projectId: number;
  @Input() webhook: Webhook;
  @Input() isModify: boolean;
  @Input() isOpen: boolean;
  @Output() edit = new EventEmitter();
  @Output() close = new EventEmitter();
  @ViewChild("webhookForm") currentForm: NgForm;
  @ViewChild(InlineAlertComponent) inlineAlert: InlineAlertComponent;


  constructor(
    private webhookService: WebhookService,

@Component({
  selector: 'app-auth-page',
  templateUrl: './auth-page.component.html',
  styleUrls: ['./auth-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AuthPageComponent {
  @WpAuth()
  auth: WpAuthRef;

  username = 'admin';
  password = 'xxxxxxxx';

  validateLoading: ClrLoadingState = ClrLoadingState.DEFAULT;
  signInLoading: ClrLoadingState = ClrLoadingState.DEFAULT;

  signIn() {
    this.signInLoading = ClrLoadingState.LOADING;
    this.auth.signIn(this.username, this.password).subscribe(res => {
      this.signInLoading = res.error
        ? ClrLoadingState.ERROR
        : ClrLoadingState.SUCCESS;
    });
  }

  validate() {
    this.validateLoading = ClrLoadingState.LOADING;
    this.auth.validateToken().subscribe(res => {
      this.validateLoading = res.error
        ? ClrLoadingState.ERROR
        : ClrLoadingState.SUCCESS;

setTimeout(() => {
      this.submitState = ClrLoadingState.DEFAULT;
    }, 1500);
  }

templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent {
  loginForm = new FormGroup({
    rememberMe: new FormControl(true),
    email: new FormControl(null, [
      Validators.required,
      Validators.email,
    ]),
    password: new FormControl(null, [
      Validators.required,
      Validators.minLength(6),
    ]),
  });
  loginBtnState = ClrLoadingState.DEFAULT;
  title = environment.app.name;

  constructor(
    private readonly core: CoreService,
    private readonly router: Router,
    private readonly store: Store,
  ) {}

  private async handleLoginSuccess() {
    this.loginBtnState = ClrLoadingState.SUCCESS;

    await this.router.navigate(['/dashboard']);
  }

  private handleLoginError(err: ApolloError) {
    this.loginBtnState = ClrLoadingState.ERROR;

/*
 * Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */

import { Component } from '@angular/core';
import { ClrButton, ClrLoadingButton, ClrLoadingState } from '@clr/angular';

@Component({ templateUrl: './buttons.component.html' })
export class KSButtons {
  public validateState: ClrLoadingState = ClrLoadingState.DEFAULT;
  public submitState: ClrLoadingState = ClrLoadingState.DEFAULT;
  public validateSmState: boolean = false;
  public submitSmState: ClrLoadingState = ClrLoadingState.DEFAULT;
  numbers: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  display: number[];

  /**
   * @description
   * These exist so that the exported API from Clarity is tested when ks-app is compiled with --prod.
   */
  private aClrButton: ClrButton;
  private aCLrLoadingButton: ClrLoadingButton;

  constructor() {
    this.display = this.numbers;
  }

  changeNumbers() {
    this.display.length = 0;