Start React root render after Server fetch success - reactjs

Question

I want to fetch some data (like translations/initial settings etc.) and after that launch an application
How do I should do that in the best way?
Now I am rendering a spinner and after the fetch success I re-render React root.
But I don't sure that is really good way.
Thanks for any help !
//launch fetch and wait for the response. After that re -render Root
bootPreparationInit()
.then(() => {
render(
<RHTLContainer>
<MuiThemeProvider>
<RootContainer store={store} history={history} />
</MuiThemeProvider>
</RHTLContainer>,
document.getElementById("root")
);
});
// it for tests. Because Karma sometimes can't see the root element
(() => {
if (!document.getElementById("root")) {
const rootEl = document.createElement("div");
rootEl.setAttribute("id", "root");
document.body.appendChild(rootEl);
}
})();
// render a spinner before data load
render(
<RHTLContainer>
<MuiThemeProvider>
<div className="spinner-ico-box">
<CircularProgress />
</div>
</MuiThemeProvider>
</RHTLContainer>,
document.getElementById("root")
);
// it for webpack HMR
if (module.hot) {
module.hot.accept("./core/containers/Root.container", () => {
const NewRootContainer = require("./core/containers/Root.container").default;
render(
<RHTLContainer>
<NewRootContainer store={store} history={history} />
</RHTLContainer>,
document.getElementById("root")
);
});
}

Answer 1

I'd suggest fetching data in RHTLContainer component constructor and on fetch success saving fetched data in state:
constructor() {
...
this.state = {
dataLoading: true;
};
bootPreparationInit()
.then((responseData) => {
...
this.setState({
dataLoading: false,
fetchedData: respondeData
});
});
}
And then inside your component you can use this.state.dataLoading to conditionally show spinner.