Render component before loading

my component rendered before loading start
its about 1ms
how can i fix it?

i use redux toolkit

adter login i use redirect to main page
on main page i fetch data and set loading state

        builder.addCase(fetchRoot.fulfilled, (state, action) => {
            state.loading = false
        })
        builder.addCase(fetchRoot.pending, (state) => {
            state.loading = true
        })
        builder.addCase(fetchRoot.rejected, (state, action) => {
            state.loading = false
        })

then render my component

     <div className='home-page'>
            {
                loading ?
                    <Loader/>
                    :
              <HomePage/>

            }
        </div>

but it show rapidly my component before loading done

I assume that the API request is initiated in useEffect, fetched data are stored in redux and passed to the component in props. In this case the simplest way is to check if that property is not undefined and make a safe return. You can return null or a loading indicator. If you want a spinner, think how many components will act like that and how many spinners will appear upon startup. Sometimes null is better.

Example:

function UserProfile(props) {
  const {user} = props;

  useEffect(() => {
    API.getUserData();
  }, []);

  if (!user) return null; // or a loading indicator

  return (
    <div className="UserProfile">
      <h1>{user.name}</h1>
    </div>
  );
}

The only drawback of this solution is a second render of the component when state is already filled with previous data. You need to decide if the previous response is acceptable (maybe even not do a 2nd API request). Or maybe you might want to discard the old data when the component is unmounted. So the 2nd render starts with the same undefined state as the 1st one.