import React , { useEffect , useState } from 'react' ; import * as Styled from './Loader.styles' ; import Logo from '../Portfolio/Logo/Logo' ; export interface Props { isOnScreen : boolean ; loadingDuration : number ; } function param { boolean } isOnScreen param { number } loadingDuration returns { JSX . Element } const Loader = ( { isOnScreen , loadingDuration } ) : JSX . Element => { const [ isLogoExpanded , setIsLogoExpanded ] = useState ( true ) ; useEffect ( ( ) => { setTimeout ( ( ) => { setIsLogoExpanded ( false ) ; } , loadingDuration - 1000 ) ; } , [ loadingDuration ] ) ; return ( < Styled . Container isOnScreen = { isOnScreen } loadingDuration = { loadingDuration } > < Logo isExpanded = { isLogoExpanded } /> < Styled . TextContainer > < Styled . ScrollText > JavaScript < br / > TypeScript < br / > React < br / > Next . js < br / > Node . js < br / > Coffee ☕ < /Styled.ScrollText> < /Styled.TextContainer> < /Styled.Container>); } ; export default Loader ;