import React , { useState , useEffect } from 'react' ; import { LinearProgress } from '@material-ui/core' ; import styled from 'styled-components' ; import { ipcRenderer } from 'electron' ; const StyledLinearProg = styled ( LinearProgress ) `
  /* Material Ui Drawer component used by sidebar has z-index: 1200 */
  z-index: 1300;
  height: 5px;
  visibility: ${ ( { $show } ) => $show ? 'visible' : 'hidden' };
` ; let delayTimer ; const delay = 500 ; const Spinner = ( ) => { const [ show , setShow ] = useState ( false ) ; useEffect ( ( ) => { const showProgress = ( ) => { delayTimer = global . setTimeout ( ( ) => setShow ( true ) , delay ) ; } ; ipcRenderer . on ( 'async-started' , showProgress ) ; return ( ) => { ipcRenderer . removeListener ( 'async-started' , showProgress ) ; } ; } ) ; useEffect ( ( ) => { const hideProgress = ( ) => { clearTimeout ( delayTimer ) ; setShow ( false ) ; } ; ipcRenderer . on ( 'async-complete' , hideProgress ) ; return ( ) => { ipcRenderer . removeListener ( 'async-complete' , hideProgress ) ; } ; } ) ; return < StyledLinearProg $show = { show } />; } ; export default Spinner ;