# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dikesoft.com/fundamentals/grid-structure/waiting-indicator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.