Как правильно сделать, чтобы при загрузке показывался прелоадер?

Question

[lexstile]

Как правильно реализовать показ прелоадера во время запроса?
Изначально делал без middleware, там было все просто:

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),
      })
    );
  }
};

Но какой способ лучше подойдет, если использовать 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),
        })
      );
    }
  };

Не знаю, является ли хорошей практикой вынести флаг в store и диспатчить...