import { EuiLoadingSpinner , EuiProgress , EuiIcon } from '@elastic/eui' ; import { i18n } from '@kbn/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 , } ; private timer : any ; private increment = 1 ; componentDidMount ( ) { this . loadingCountSubscription = this . props . loadingCount$ . subscribe ( ( count ) => { if ( this . increment > 1 ) { clearTimeout ( this . timer ) ; } this . increment += this . increment ; this . timer = setTimeout ( ( ) => { this . setState ( { visible : count > 0 , } ) ; } , 250 ) ; } ) ; } componentWillUnmount ( ) { if ( this . loadingCountSubscription ) { clearTimeout ( this . timer ) ; this . loadingCountSubscription . unsubscribe ( ) ; this . loadingCountSubscription = undefined ; } } render ( ) { const className = classNames ( ! this . state . visible && 'kbnLoadingIndicator-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' , } ) ; const logo = this . state . visible ? ( < EuiLoadingSpinner size = "l" data - test - subj = { testSubj } aria - hidden = { false } aria - label = { ariaLabel } />) : (<EuiIcon type="logoElastic" size="l" data-test-subj={testSubj} className="chrHeaderLogo__cluster" aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.logoAriaLabel', { defaultMessage : 'Elastic Logo' , } ) } />); return ! this . props . showAsBar ? ( logo ) : ( < EuiProgress className = { className } data - test - subj = { testSubj } aria - hidden = { ariaHidden } aria - label = { ariaLabel } position = "fixed" color = "accent" size = "xs" / > ) ; } }