Loading state before display new content

Question

I'm trying to achieve optimistic UI loading with react and redux. This is my reducer:

const initState = {
  user: {},
  loading: true,
};

export default function (state = initState, action) {
  switch (action.type) {
   
    case GET_CURRENT_USER_BY_PROFILEID_LOADING:
      return {
        ...state,
        loading: true,
      };
    case GET_CURRENT_USER_BY_PROFILEID:
      return {
        ...state, 
        loading: false,
        user: action.payload.item,
      };

    default:
      return state;
  }
}

This is action creator:

export const getCurrentUserByProfileId = (profileId) => {
  return (dispatch) => {
    dispatch({ type: GET_CURRENT_USER_BY_PROFILEID_LOADING });
    baseUrl
      .get(
        Constants.RELATIVEPATH +
          Constants.USERS +
          '/' +
          profileId +
          Constants.PROFILEID,
        { headers }
      )
      .then((response) => {
        const data = response.data;
        dispatch({
          type: GET_CURRENT_USER_BY_PROFILEID,
          payload: { item: data },
        });
      })
      .catch((error) => {
        console.log(error);
        onError(error);
      });
  };
};

The ideal scenario would be: Loading --> New state and I am getting this only on the first load, after that it's: Flash of old state --> Loading --> New state

Answer 1

You could dispatch the GET_CURRENT_USER_BY_PROFILEID_LOADING in a different function, before displaying the component to the user.

That way you would have:

1. old state (not displayed)
2. GET_CURRENT_USER_BY_PROFILEID_LOADING
3. navigation, or whatever you do display the component
4. loading (displayed)
5. GET_CURRENT_USER_BY_PROFILEID
6. new state (displayed)