[英]How to show a loading spinner until component loads in React
My question is not as simple as the title. 我的问题并不像标题那么简单。 I'm trying to show a loading component for 1 second and then replace that component with the actual data. 我试图显示1秒钟的加载组件,然后用实际数据替换该组件。
Here is my code: 这是我的代码:
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>
);
So here I have the <UserSection />
component which essentially just holds the user's picture and name (for now). 因此,这里有<UserSection />
组件,该组件实际上仅保存用户的图片和姓名(目前)。 I would like to load that component after 1 or 2 seconds but until then I would like to show a spinner instead. 我想在1或2秒钟后加载该组件,但在此之前,我想显示一个微调器。
I'm using semantic ui react for my app and they have a handy spinner which looks like this: 我正在为我的应用程序使用语义ui react,它们有一个方便的微调器,如下所示:
const LoaderExampleInlineCentered = () => <Loader active inline='centered' />
Can I please have some guidance with this? 我可以为此提供一些指导吗?
You can conditionally render one of the two components, Loader Or UserSection. 您可以有条件地呈现两个组件之一,即Loader或UserSection。
this.state.profileExist === true ? <UserSection /> : <Loader />
Then initialize profileExist as a False in componentDid mount, then use setTimeout to set it to true 然后在componentDid挂载中将profileExist初始化为False,然后使用setTimeout将其设置为true
componentDidMount() {
this.setState({profileExist: false})
setTimeout(() => {
this.setState({profileExist: true})
}, 1000);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.