How to render a component after getting data from API?

Question

React

Required stack: react, redux, react-router 3, redux-saga.
The essence of the question is this, there is a certain interface for an authorized user.
Communication with api is carried out through a token, which is stored in local storage. When the application is initialized, the token is checked, and if it is available, a check is placed in the redax store that the user is authorized and the user data loading saga is triggered, but at the moment when the server collects data for the client, the user has a preloader spinning, and not very beautiful ones appear side effects due to which I would like to close the rendering of the page components until the server returns the data to the client.
So, how, or how to build the logic correctly so that the rendering of the page components, or the entire application, is carried out after receiving the data and remove unpleasant moments by type, the application starts, the user sees the "Login" button, after 1-2s it changes to ava from nickname.

Answer 1

Well, the logic should be simple when the user presses the authorization button, show the preloader. This preloader should spin until the data arrives. When the data arrives, you must stop it. For this, it is better to have some type of loading in the redux. When authorization is pressed, this flag is set to true. And as soon as the data has arrived, set the flag to false. And in the component, hang up a check if true then show the preloader and if false then show the authorization result (username avu, etc.) and hide the preloader.