import React from 'react' import PropTypes from 'prop-types' import { withTheme } from 'styled-components' import LoadingBolt from 'components/LoadingBolt' const LoadingBoltWithTheme = withTheme(LoadingBolt) /** * A HOC that will display the LoadingBolt component whilast the wrapped component is loading. * @param {React.Component} Component Component to wrap */ const withLoading = Component => class extends React.Component { static displayName = 'withLoading' static propTypes = { isLoading: PropTypes.bool.isRequired } /** * Render the loading bolt ontop of the wrapped component for as long as needed. */ render() { const { isLoading, theme, children, ...rest } = this.props return ( <React.Fragment> <LoadingBoltWithTheme isLoading={isLoading} /> <Component {...rest}>{children}</Component> </React.Fragment> ) } } export default withLoading