> For the complete documentation index, see [llms.txt](https://docs.dikesoft.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dikesoft.com/fundamentals/grid-structure/waiting-indicator.md).

# Waiting Indicator

The DikeGrid definition overlaps a <mark style="color:red;">`div`</mark> element over the primary DikeGrid container, as you can see in the following screenshot. The yellow highlighted <mark style="color:red;">`div`</mark> is the primary DikeGrid container.

![Waiting Indicator div element](/files/l1kcn9K9Mta65J4dFSbn)

## Loading Indicator

When the DikeGrid instance is waiting for the rows of data to display, it blocks its UI and shows a message. The message indicates this waiting.

Let us add a delay when the SampleData service loads the rows of data to see the displayed message.

{% code title="grid-structure.component.ts" %}

```typescript
ngOnInit(): void {
    this.dkgDataSource = this.sampleData.getEmployees(1000).pipe(delay(2000));
}
```

{% endcode %}

![Loading Indicator](/files/vVh9Y5p08R6CwmyX6zmV)

You can customize the displayed message by providing an Injection Token called <mark style="color:blue;">`LOADING_MESSAGE`</mark>.

Let us give the module this value for the above Injection Token.

{% code title="structure.module.ts" %}

```typescript
@NgModule({
  providers: [
    { provide: LOADING_MESSAGE, useValue: 'Loading rows of data, please wait...' }
  ]
})
export class StructureModule { }

```

{% endcode %}

![Loading Indicator - Custom Message](/files/D7g6MtqqxUuI1nZmn4KY)

## Processing Indicator

When the DikeGrid instance is processing an edition operation, it blocks its UI and shows a processing message.

{% hint style="success" %}
You can customize the displayed message by providing an Injection Token called <mark style="color:blue;">`PROCESSING_MESSAGE`</mark>.
{% endhint %}

## Displaying the indicator using the API

When you query a <mark style="color:green;">`DikeGridComponent`</mark> instance from the view, you can access a property called `waitingIndicator` of type <mark style="color:green;">`DikeGridWaitingIndicator`</mark>.

{% hint style="success" %}
See the [<mark style="color:green;">`DikeGridWaitingIndicator`</mark>](/reference/dkgrid-api/dkgridwaitingindicator.md) definition for more details.
{% endhint %}

You can show the Waiting Indicator imperatively invoking the methods defined in the `waitingIndicator` property.

Let us modify the code to allow entering a custom message and display it.

{% tabs %}
{% tab title="grid-structure.component.html" %}

```markup
<div class="p-4 leading-6 text-secondary"><strong>Waiting Indicator message</strong></div>
<div class="p-4 flex flex-row flex-wrap justify-around items-center">
    <mat-form-field class="flex-auto w-80 mr-5">
        <mat-label>Custom message</mat-label>
        <input matInput
            type="text"
            [formControl]="customMessage">

        <mat-hint align="end">Text value</mat-hint>
        <mat-error *ngIf="customMessage.hasError('required')">Required</mat-error>
    </mat-form-field>
    <button mat-raised-button
        class="flex-none w-32 mr-5 mb-3"
        color="primary"
        [disabled]="!customMessage.valid"
        (click)="onDisplayWaitingIndicator()">Show Indicator
    </button>
    <button mat-raised-button
        class="flex-none w-32 mr-5 mb-3"
        color="primary"
        (click)="onHideWaitingIndicator()">Hide Indicator
    </button>
</div>

<dike-grid id="grid-structure" #grid="dkgGrid">
</dike-grid>
```

{% endtab %}

{% tab title="grid-structure.component.ts" %}

```typescript
@Component({
  selector: 'grid-structure',
  templateUrl: './grid-structure.component.html',
  styleUrls: ['./grid-structure.component.scss'],

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridStructureComponent implements OnInit, OnDestroy {

  // Retrieve the DikeGridComponent<T> instance from the view:
  @ViewChild('grid') dikeGrid: DikeGridComponent<Employee>;

  customMessage: FormControl;

  constructor() {
    this.customMessage = new FormControl('', Validators.required);
  }

  onDisplayWaitingIndicator(): void {
    this.dikeGrid.waitingIndicator.customMessageIndicator(this.customMessage.value as string);
  }

  onHideWaitingIndicator(): void {
    this.dikeGrid.waitingIndicator.hideWaitingIndicator();
  }
}

```

{% endtab %}
{% endtabs %}

The previous configuration adds:

1. A textbox to enter the custom message.
2. Two buttons to display and hide the Waiting Indicator, respectively.
3. Callbacks in the prior UI controls.

Then, clicking on the **Show Indicator** button generates the following output:

![Displaying the indicator using the API](/files/jDSYyaTclrUoFym9QtUY)