1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-26 17:08:07 +00:00

Added loading state for content

This commit is contained in:
Vladimir Volek 2018-10-31 12:31:43 +01:00 committed by Szymon Lesisz
parent aea02118c8
commit e28576e19e

View File

@ -1,6 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Loader from 'components/Loader';
import { FONT_SIZE } from 'config/variables';
import colors from 'config/colors';
const Wrapper = styled.div`
display: flex;
@ -9,16 +12,38 @@ const Wrapper = styled.div`
padding: 40px 35px 40px 35px;
`;
const Loading = styled.div`
display: flex;
flex: 1;
align-items: center;
justify-content: center;
flex-direction: row;
`;
const Text = styled.div`
font-size: ${FONT_SIZE.BIG};
color: ${colors.TEXT_SECONDARY};
margin-left: 10px;
`;
const Content = ({
children,
isLoading = false,
}) => (
<Wrapper>
{children}
{!isLoading && children}
{isLoading && (
<Loading>
<Loader size={30} />
<Text>Initializing accounts</Text>
</Loading>
)}
</Wrapper>
);
Content.propTypes = {
children: PropTypes.element,
isLoading: PropTypes.bool,
};
export default Content;