File

packages/components/directives/eui-loading.directive.ts

Description

Directive displaying a loading spinner icon inside input fields during async operations. Dynamically creates and positions a loading icon that appears when euiLoading is true. Automatically manages wrapper div for icon positioning and handles readonly state. Compatible with euiClearable directive for combined loading and clear functionality.

<input euiInputText [euiLoading]="isSearching" [(ngModel)]="searchTerm" />

isSearching = false;

onSearch() {
  this.isSearching = true;
  this.api.search().subscribe(() => this.isSearching = false);
}

Accessibility

• Loading icon positioned at end of input for visual feedback
• Input becomes readonly while loading to prevent changes during operation
• Icon has aria-label for screen reader announcement

Notes

• Loading icon automatically positioned at input end
• Works alongside euiClearable directive without conflicts
• Wrapper div created automatically for icon positioning
• Input set to readonly state when loading is active

Implements

OnChanges