File

packages/components/eui-block-document/eui-block-document.component.ts

Description

EuiBlockDocumentComponent creates a document overlay that can be toggled into a blocked state. When blocked, a loading indicator is displayed. Uses OnPush change detection strategy for better performance.

Typically placed at app root level

<eui-block-document [isBlocked]="isProcessing"></eui-block-document>

Trigger blocking from component

<button euiButton (click)="blockDocument()">Process Data</button>

import { EuiAppShellService } from '@eui/core';

private appShellService = inject(EuiAppShellService);
isProcessing = false;

blockDocument(): void {
  this.appShellService.isBlockDocumentActive = true;

  // Simulate async operation
  setTimeout(() => {
    this.appShellService.isBlockDocumentActive = false;
  }, 2000);
}

Accessibility

• Uses role="region" for semantic landmark identification
• aria-label provides context about the blocked state
• Loading indicator is announced to screen readers
• Prevents interaction with underlying content when blocked
• Focus is trapped within the overlay during blocked state

Notes

• Typically controlled via EuiAppShellService.isBlockDocumentActive property
• Creates full-page overlay when isBlocked is true
• Displays loading spinner automatically during blocked state
• Should be placed at application root level for full document coverage
• Use for long-running operations that require blocking entire UI
• Different from eui-block-content which blocks specific sections
• Automatically handles z-index to appear above all content
• Consider user experience - use sparingly for truly blocking operations