diff --git a/client/package.json b/client/package.json
index a73054c21..87266a85b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "7.8.4",
-    "@blueprintjs/core": "^3.23.1",
+    "@blueprintjs/core": "^3.38.1",
     "@blueprintjs/datetime": "^3.15.2",
     "@blueprintjs/select": "^3.11.2",
     "@blueprintjs/table": "^3.8.3",
diff --git a/client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js b/client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js
similarity index 90%
rename from client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js
rename to client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js
index 57f862073..e538e095f 100644
--- a/client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js
+++ b/client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -30,6 +30,7 @@ function InventoryAdjustmentDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete  alert.
   const handleCancelInventoryAdjustmentDelete = () => {
@@ -37,9 +38,9 @@ function InventoryAdjustmentDeleteAlert({
   };
 
   const handleConfirmInventoryAdjustmentDelete = () => {
+    setLoading(true);
     requestDeleteInventoryAdjustment(inventoryId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_adjustment_has_been_deleted_successfully',
@@ -48,7 +49,9 @@ function InventoryAdjustmentDeleteAlert({
         });
         queryCache.invalidateQueries('inventory-adjustment-list');
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -62,6 +65,7 @@ function InventoryAdjustmentDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelInventoryAdjustmentDelete}
       onConfirm={handleConfirmInventoryAdjustmentDelete}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage
diff --git a/client/src/containers/Alerts/Item/ItemActivateAlert.js b/client/src/containers/Alerts/Items/ItemActivateAlert.js
similarity index 85%
rename from client/src/containers/Alerts/Item/ItemActivateAlert.js
rename to client/src/containers/Alerts/Items/ItemActivateAlert.js
index 8af112266..9d3a1a9c8 100644
--- a/client/src/containers/Alerts/Item/ItemActivateAlert.js
+++ b/client/src/containers/Alerts/Items/ItemActivateAlert.js
@@ -1,8 +1,5 @@
-import React from 'react';
-import {
-  FormattedMessage as T,
-  useIntl,
-} from 'react-intl';
+import React, { useState } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -30,7 +27,8 @@ function ItemActivateAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-
+  const [isLoading, setLoading] = useState(false);
+  
   // Handle activate item alert cancel.
   const handleCancelActivateItem = () => {
     closeAlert(name);
@@ -38,9 +36,9 @@ function ItemActivateAlert({
 
   // Handle confirm item activated.
   const handleConfirmItemActivate = () => {
+    setLoading(true);
     requestActivateItem(itemId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_has_been_activated_successfully',
@@ -49,8 +47,10 @@ function ItemActivateAlert({
         });
         queryCache.invalidateQueries('items-table');
       })
-      .catch((error) => {
+      .catch((error) => {})
+      .finally(() => {
         closeAlert(name);
+        setLoading(false);
       });
   };
 
@@ -62,6 +62,7 @@ function ItemActivateAlert({
       isOpen={isOpen}
       onCancel={handleCancelActivateItem}
       onConfirm={handleConfirmItemActivate}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_activate_this_item'} />
diff --git a/client/src/containers/Alerts/Item/ItemBulkDeleteAlert.js b/client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js
similarity index 89%
rename from client/src/containers/Alerts/Item/ItemBulkDeleteAlert.js
rename to client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js
index 0aa178eb5..354fd43e4 100644
--- a/client/src/containers/Alerts/Item/ItemBulkDeleteAlert.js
+++ b/client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
@@ -26,16 +26,16 @@ function ItemBulkDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-
+  const [isLoading, setLoading] = useState(false);
   // handle cancel item bulk delete alert.
   const handleCancelBulkDelete = () => {
     closeAlert(name);
   };
   // Handle confirm items bulk delete.
   const handleConfirmBulkDelete = () => {
+    setLoading(true);
     requestDeleteBulkItems(itemsIds)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_items_has_been_deleted_successfully',
@@ -43,7 +43,9 @@ function ItemBulkDeleteAlert({
           intent: Intent.SUCCESS,
         });
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
diff --git a/client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js b/client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js
similarity index 89%
rename from client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js
rename to client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js
index 644ca020d..3bdee7dc1 100644
--- a/client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js
+++ b/client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -30,6 +30,7 @@ function ItemCategoryBulkDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel bulk delete alert.
   const handleCancelBulkDelete = () => {
@@ -38,9 +39,9 @@ function ItemCategoryBulkDeleteAlert({
 
   // handle confirm itemCategories bulk delete.
   const handleConfirmBulkDelete = () => {
+    setLoading(true);
     requestDeleteBulkItemCategories(itemCategoriesIds)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_categories_has_been_deleted_successfully',
@@ -48,8 +49,10 @@ function ItemCategoryBulkDeleteAlert({
           intent: Intent.SUCCESS,
         });
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
         closeAlert(name);
+        setLoading(false);
       });
   };
   return (
@@ -63,6 +66,7 @@ function ItemCategoryBulkDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelBulkDelete}
       onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage
diff --git a/client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js b/client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js
similarity index 90%
rename from client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js
rename to client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js
index 85e7c30a0..63688b2fa 100644
--- a/client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js
+++ b/client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -31,6 +31,7 @@ function ItemCategoryDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete item category alert.
   const handleCancelItemCategoryDelete = () => {
@@ -39,9 +40,9 @@ function ItemCategoryDeleteAlert({
 
   // Handle alert confirm delete item category.
   const handleConfirmItemDelete = () => {
+    setLoading(true);
     requestDeleteItemCategory(itemCategoryId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_category_has_been_deleted_successfully',
@@ -50,7 +51,9 @@ function ItemCategoryDeleteAlert({
         });
         queryCache.invalidateQueries('items-categories-list');
       })
-      .catch(() => {
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -64,6 +67,7 @@ function ItemCategoryDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelItemCategoryDelete}
       onConfirm={handleConfirmItemDelete}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage
diff --git a/client/src/containers/Alerts/Item/ItemDeleteAlert.js b/client/src/containers/Alerts/Items/ItemDeleteAlert.js
similarity index 90%
rename from client/src/containers/Alerts/Item/ItemDeleteAlert.js
rename to client/src/containers/Alerts/Items/ItemDeleteAlert.js
index 529caa4aa..0c2573e53 100644
--- a/client/src/containers/Alerts/Item/ItemDeleteAlert.js
+++ b/client/src/containers/Alerts/Items/ItemDeleteAlert.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -33,6 +33,7 @@ function ItemDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete item alert.
   const handleCancelItemDelete = () => {
@@ -40,9 +41,9 @@ function ItemDeleteAlert({
   };
 
   const handleConfirmDeleteItem = () => {
+    setLoading(true);
     requestDeleteItem(itemId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_has_been_deleted_successfully',
@@ -53,7 +54,10 @@ function ItemDeleteAlert({
       })
       .catch(({ errors }) => {
         handleDeleteErrors(errors);
+      })
+      .finally(() => {
         closeAlert(name);
+        setLoading(false);
       });
   };
 
@@ -66,6 +70,7 @@ function ItemDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelItemDelete}
       onConfirm={handleConfirmDeleteItem}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage
diff --git a/client/src/containers/Alerts/Item/ItemInactivateAlert.js b/client/src/containers/Alerts/Items/ItemInactivateAlert.js
similarity index 85%
rename from client/src/containers/Alerts/Item/ItemInactivateAlert.js
rename to client/src/containers/Alerts/Items/ItemInactivateAlert.js
index 975f2ca00..dbf306a81 100644
--- a/client/src/containers/Alerts/Item/ItemInactivateAlert.js
+++ b/client/src/containers/Alerts/Items/ItemInactivateAlert.js
@@ -1,8 +1,5 @@
-import React from 'react';
-import {
-  FormattedMessage as T,
-  useIntl,
-} from 'react-intl';
+import React, { useState } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -30,6 +27,7 @@ function ItemInactivateAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel inactivate alert.
   const handleCancelInactivateItem = () => {
@@ -38,9 +36,9 @@ function ItemInactivateAlert({
 
   // Handle confirm item Inactive.
   const handleConfirmItemInactive = () => {
+    setLoading(true);
     requestInactiveItem(itemId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_has_been_inactivated_successfully',
@@ -49,7 +47,9 @@ function ItemInactivateAlert({
         });
         queryCache.invalidateQueries('items-table');
       })
-      .catch((error) => {
+      .catch((error) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -62,6 +62,7 @@ function ItemInactivateAlert({
       isOpen={isOpen}
       onCancel={handleCancelInactivateItem}
       onConfirm={handleConfirmItemInactive}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_inactive_this_item'} />
diff --git a/client/src/containers/Items/ItemsAlerts.js b/client/src/containers/Items/ItemsAlerts.js
index 26482550a..858340f8c 100644
--- a/client/src/containers/Items/ItemsAlerts.js
+++ b/client/src/containers/Items/ItemsAlerts.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import ItemDeleteAlert from 'containers/Alerts/Item/ItemDeleteAlert';
-import ItemInactivateAlert from 'containers/Alerts/Item/ItemInactivateAlert';
-import ItemActivateAlert from 'containers/Alerts/Item/ItemActivateAlert';
-import ItemBulkDeleteAlert from 'containers/Alerts/Item/ItemBulkDeleteAlert';
-import ItemCategoryDeleteAlert from 'containers/Alerts/Item/ItemCategoryDeleteAlert';
-import ItemCategoryBulkDeleteAlert from 'containers/Alerts/Item/ItemCategoryBulkDeleteAlert';
-import InventoryAdjustmentDeleteAlert from 'containers/Alerts/Item/InventoryAdjustmentDeleteAlert';
+import ItemDeleteAlert from 'containers/Alerts/Items/ItemDeleteAlert';
+import ItemInactivateAlert from 'containers/Alerts/Items/ItemInactivateAlert';
+import ItemActivateAlert from 'containers/Alerts/Items/ItemActivateAlert';
+import ItemBulkDeleteAlert from 'containers/Alerts/Items/ItemBulkDeleteAlert';
+import ItemCategoryDeleteAlert from 'containers/Alerts/Items/ItemCategoryDeleteAlert';
+import ItemCategoryBulkDeleteAlert from 'containers/Alerts/Items/ItemCategoryBulkDeleteAlert';
+import InventoryAdjustmentDeleteAlert from 'containers/Alerts/Items/InventoryAdjustmentDeleteAlert';
 
 /**
  * Items alert.