How can I add one loading using pending promises to handle all api loading in redux toolkit?

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js">
import { createSlice } from "@reduxjs/toolkit";
import { getUser, updateUser } from "./index";
import { getAllData, getData } from "../../logs/store/index";

const manageErrorAndLoading = (state, actionType, error) => {
  state.loading[actionType] = true;
  state.error[actionType] = error;
};

export const loadingSlice = createSlice({
  name: "loading",
  initialState: {
    loading: false
  },
  reducer: {
    toggleLoading: (state) => !state,
  },
  extraReducers: {
    [getUser.pending]: () => true,
    [getUser.fulfilled]: () => false,
    [getUser.rejected]: () => false,
    [updateUser.pending]: () => true,
    [updateUser.fulfilled]: () => false,
    [updateUser.rejected]: () => false,
    [getData.pending]: () => true,
    [getData.fulfilled]: () => false,
    [getData.rejected]: () => false,
  },
});

export const { toggleLoading } = loadingSlice.actions;
export default loadingSlice.reducer;
</script>

I have used this method to add loading but its not efficient. the loading is running parallel on all api, when one api is loading state gets true.