How to make sure that the preloader is shown when loading?

Question

React

How to correctly implement the display of the preloader during the request?
Initially, I did it without middleware, everything was simple there:

const onSubmitSecurityQuestion = async () => {
    setLoading(true);
    await saveSecurityQuestion(dispatch, {
        question,
        answer,
        repeatAnswer,
        ...(yourQuestion ? { yourQuestion } : {}),
      });
    setLoading(false);
  };

export const saveSecurityQuestion = (dispatch, data = null) => {
  try {
    const saveSecurityQuestionResult = await callSecurityQuestion(data)
      .then((response) => get(response, 'data', null))
      .catch((e) => throwError(getError(e)));

    console.log('saveSecurityQuestionResult', saveSecurityQuestionResult);

    // throwError();
  } catch (error) {
    dispatch(
      setError({
        code: get(error, 'code', null),
        message: get(error, 'message', null),
      })
    );
  }
};

But which way is better if you use redux-thunk?

const [loading, setLoading] = useState(false);

  const onSubmitSecurityQuestion = () => {
    setLoading(true);
    dispatch(
      saveSecurityQuestion({
        question,
        answer,
        repeatAnswer,
        ...(yourQuestion ? { yourQuestion } : {}),
      })
    );
    setLoading(false);
  };

export const saveSecurityQuestion =
  (data = null) =>
  async (dispatch) => {
    try {
      const saveSecurityQuestionResult = await callSecurityQuestion(data)
        .then((response) => get(response, 'data', null))
        .catch((e) => throwError(getError(e)));

      console.log('saveSecurityQuestionResult', saveSecurityQuestionResult);

      // throwError();
    } catch (error) {
      dispatch(
        setError({
          code: get(error, 'code', null),
          message: get(error, 'message', null),
        })
      );
    }
  };

I don't know if it's good practice to flag the store and dispatch...