import { EuiLoadingSpinner , EuiProgress } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import React from 'react' ; import classNames from 'classnames' ; import { Subscription } from 'rxjs' ; import { HttpStart } from '../../http' ; export interface LoadingIndicatorProps { loadingCount$ : ReturnType < HttpStart [ 'getLoadingCount$' ] > ; showAsBar ? : boolean ; } export class LoadingIndicator extends React . Component < LoadingIndicatorProps , { visible : boolean ; } > { public static defaultProps = { showAsBar : false } ; private loadingCountSubscription ? : Subscription ; state = { visible : false , } ; componentDidMount ( ) { this . loadingCountSubscription = this . props . loadingCount$ . subscribe ( ( count ) => { this . setState ( { visible : count > 0 , } ) ; } ) ; } componentWillUnmount ( ) { if ( this . loadingCountSubscription ) { this . loadingCountSubscription . unsubscribe ( ) ; this . loadingCountSubscription = undefined ; } } render ( ) { const className = classNames ( ! this . state . visible && 'osdLoadingIndicator-hidden' ) ; const testSubj = this . state . visible ? 'globalLoadingIndicator' : 'globalLoadingIndicator-hidden' ; const ariaHidden = this . state . visible ? false : true ; const ariaLabel = i18n . translate ( 'core.ui.loadingIndicatorAriaLabel' , { defaultMessage : 'Loading content' , } ) ; return ! this . props . showAsBar ? ( < EuiLoadingSpinner className = { className } data - test - subj = { testSubj } aria - hidden = { ariaHidden } aria - label = { ariaLabel } />) : (<EuiProgress className={className} data-test-subj={testSubj} aria-hidden={ariaHidden} aria-label={ariaLabel} position="fixed" color="accent" size="xs"/ > ) ; } }