@@ -12,10 +12,10 @@ interface Props {
1212const styles = {
1313page :{
1414position :'relative' as 'relative' ,
15- display :'flex' ,
16- flexDirection :'column' ,
17- alignItems :'center' ,
18- justifyContent :'center' ,
15+ display :'flex' as 'flex' ,
16+ flexDirection :'column' as 'column' ,
17+ alignItems :'center' as 'center' ,
18+ justifyContent :'center' as 'center' ,
1919height :'100%' ,
2020width :'100%' ,
2121} ,
@@ -29,13 +29,13 @@ const styles = {
2929}
3030
3131const LoadingPage = ( { text, processes} :Props ) => {
32- const [ showLoading , setShowHiding ] = React . useState ( false )
32+ const [ showLoading , setShowHiding ] = React . useState < boolean > ( ! ! processes ?. length )
3333
3434React . useEffect ( ( ) => {
3535// wait some time before showing loading indicator
3636const timeout = setTimeout ( ( ) => {
3737setShowHiding ( true )
38- } , 600 )
38+ } , 500 )
3939return ( ) => {
4040clearTimeout ( timeout )
4141}
@@ -45,15 +45,14 @@ const LoadingPage = ({ text, processes }: Props) => {
4545if ( ! showLoading ) {
4646return null
4747}
48-
4948return (
5049< div css = { styles . page } >
5150< Loading message = { text } />
52- { processes && processes . length && (
51+ { processes && processes . length ? (
5352< div css = { styles . processes } >
5453< ProcessMessages processes = { processes } />
5554</ div >
56- ) }
55+ ) : null }
5756</ div >
5857)
5958}