diff --git a/client/constants.js b/client/constants.js
index 9c5f9ae353..608a31a0f9 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -137,9 +137,6 @@ export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
 
-export const START_LOADING = 'START_LOADING';
-export const STOP_LOADING = 'STOP_LOADING';
-
 export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 
diff --git a/client/modules/IDE/actions/assets.js b/client/modules/IDE/actions/assets.js
index 333dfd0ab2..ecd16fb7c6 100644
--- a/client/modules/IDE/actions/assets.js
+++ b/client/modules/IDE/actions/assets.js
@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { assetsActions } from '../reducers/assets';
 
 const { setAssets, deleteAsset } = assetsActions;
diff --git a/client/modules/IDE/actions/collections.js b/client/modules/IDE/actions/collections.js
index 395a504727..32790e681e 100644
--- a/client/modules/IDE/actions/collections.js
+++ b/client/modules/IDE/actions/collections.js
@@ -1,7 +1,7 @@
 import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { setToastText, showToast } from './toast';
 
 const TOAST_DISPLAY_TIME_MS = 1500;
diff --git a/client/modules/IDE/actions/loader.js b/client/modules/IDE/actions/loader.js
deleted file mode 100644
index f331094c02..0000000000
--- a/client/modules/IDE/actions/loader.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as ActionTypes from '../../../constants';
-
-export function startLoader() {
-  return { type: ActionTypes.START_LOADING };
-}
-
-export function stopLoader() {
-  return { type: ActionTypes.STOP_LOADING };
-}
diff --git a/client/modules/IDE/actions/projects.js b/client/modules/IDE/actions/projects.js
index eb9984cf54..34ca2a35bf 100644
--- a/client/modules/IDE/actions/projects.js
+++ b/client/modules/IDE/actions/projects.js
@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 
 // eslint-disable-next-line
 export function getProjects(username) {
diff --git a/client/modules/IDE/actions/projects.unit.test.js b/client/modules/IDE/actions/projects.unit.test.js
index 6fce08c796..95a6205520 100644
--- a/client/modules/IDE/actions/projects.unit.test.js
+++ b/client/modules/IDE/actions/projects.unit.test.js
@@ -5,6 +5,7 @@ import { rest } from 'msw';
 
 import * as ProjectActions from './projects';
 import * as ActionTypes from '../../../constants';
+import { startLoader, stopLoader } from '../reducers/loading';
 import {
   initialTestState,
   mockProjects
@@ -33,9 +34,9 @@ describe('projects action creator tests', () => {
     store = mockStore(initialTestState);
 
     const expectedActions = [
-      { type: ActionTypes.START_LOADING },
+      { type: startLoader.type },
       { type: ActionTypes.SET_PROJECTS, projects: mockProjects },
-      { type: ActionTypes.STOP_LOADING }
+      { type: stopLoader.type }
     ];
 
     return store
diff --git a/client/modules/IDE/reducers/loading.js b/client/modules/IDE/reducers/loading.js
index 529c5747a3..a1db68d80a 100644
--- a/client/modules/IDE/reducers/loading.js
+++ b/client/modules/IDE/reducers/loading.js
@@ -1,14 +1,13 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 
-const loading = (state = false, action) => {
-  switch (action.type) {
-    case ActionTypes.START_LOADING:
-      return true;
-    case ActionTypes.STOP_LOADING:
-      return false;
-    default:
-      return state;
+const loadingSlice = createSlice({
+  name: 'loading',
+  initialState: false,
+  reducers: {
+    startLoader: () => true,
+    stopLoader: () => false
   }
-};
+});
 
-export default loading;
+export const { startLoader, stopLoader } = loadingSlice.actions;
+export default loadingSlice.reducer;