Как показать загрузочный счетчик, пока компонент не загружается в React - PullRequest
Новая
       40

Как показать загрузочный счетчик, пока компонент не загружается в React

0 голосов
/ 08 октября 2018

Мой вопрос не так прост, как заголовок.Я пытаюсь показать загрузочный компонент в течение 1 секунды, а затем заменить этот компонент фактическими данными.

Вот мой код: 

const TopNavigationAuth = () => (
<Container>
    <Menu.Item
        name="landing"
        content="Landing"
        as={Link}
        to={routes.LANDING}
    />
    <Menu.Item name="home" content="Home" as={Link} to={routes.HOME} />
    <Menu.Menu position="right">
        <Menu.Item
            name="account"
            content="Account"
            as={Link}
            to={routes.ACCOUNT}
        />
        <UserSection />
        <Menu.Item
            name="signout"
            content={
                <Button
                    content="Sign Out"
                    onClick={authFunctions.doSignOut}
                    primary
                />
            }
        />
    </Menu.Menu>
</Container>
);

Итак, у меня есть <UserSection />компонент, который, по сути, просто содержит изображение и имя пользователя (на данный момент).Я хотел бы загрузить этот компонент через 1 или 2 секунды, но до этого я хотел бы показать вместо этого счетчик.

Я использую семантическое взаимодействие с пользовательским интерфейсом для своего приложения, и у них есть удобный спиннер, который выглядит следующим образом: 

const LoaderExampleInlineCentered = () => <Loader active inline='centered' />

Могу ли я дать несколько советов по этому поводу?

1 Ответ

0 голосов
/ 08 октября 2018

Вы можете условно визуализировать один из двух компонентов, Loader или UserSection.

this.state.profileExist === true ? <UserSection /> : <Loader />

Затем инициализируйте profileExist как False в компоненте mountDid, затем используйте setTimeout, чтобы установить его в true 

componentDidMount() {
    this.setState({profileExist: false})
    setTimeout(() => { 
          this.setState({profileExist: true})
    }, 1000);
}
...