Make a state for loading, set it to true, and then show a loading element if the state is set to true. When your API loads, change the loading state to false.
classAppextendsReact.Component{
state = {
loading: true
};
api() {
// axios API call here// ideally you would callback// but for simple terms:this.setState({
loading: false
});
}
componentDidMount() {
setTimeout(() => this.setState({ loading: false }), 1500); // simulates an async action, and hides the spinner
}
render() {
const { loading } = this.state;
if(loading) { // if your component doesn't have to wait for an async action, remove this block returnnull; // render null when app is not ready
}
return (
<div>I'm the app</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
Or you could make the loader using the CSS :empty pseudo class to show a loader when the list is empty (before your API fills it):
Ryosuke
Designer / Developer / Influencer
Make a state for loading, set it to true, and then show a loading element if the state is set to true. When your API loads, change the loading state to false.
class App extends React.Component { state = { loading: true }; api() { // axios API call here // ideally you would callback // but for simple terms: this.setState({ loading: false }); } componentDidMount() { setTimeout(() => this.setState({ loading: false }), 1500); // simulates an async action, and hides the spinner } render() { const { loading } = this.state; if(loading) { // if your component doesn't have to wait for an async action, remove this block return null; // render null when app is not ready } return ( <div>I'm the app</div> ); } } ReactDOM.render( <App />, document.getElementById('app') );Or you could make the loader using the CSS :empty pseudo class to show a loader when the list is empty (before your API fills it):
.loader:empty { position: absolute; top: calc(50% - 4em); left: calc(50% - 4em); width: 6em; height: 6em; border: 1.1em solid rgba(0, 0, 0, 0.2); border-left: 1.1em solid #000000; border-radius: 50%; animation: load8 1.1s infinite linear; } @keyframes load8 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }Or you can use both techniques to ensure the loader always shows, and there's no JS-like FOUC. Shoutout to Ori on StackOverflow for the snippets.