feat: refactoring alerts.

src/containers/Items/ItemsAlerts.js

@@ -1,19 +1,39 @@
 import React from 'react';
-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';
+
+const ItemDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/Items/ItemDeleteAlert'),
+);
+
+const ItemInactivateAlert = React.lazy(() =>
+  import('containers/Alerts/Items/ItemInactivateAlert'),
+);
+
+const ItemActivateAlert = React.lazy(() =>
+  import('containers/Alerts/Items/ItemActivateAlert'),
+);
+
+const ItemBulkDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/Items/ItemBulkDeleteAlert'),
+);
 
 /**
  * Items alert.
  */
-export default function ItemsAlerts() {
-  return (
-    <div>
-      <ItemDeleteAlert name={'item-delete'} />
-      <ItemInactivateAlert name={'item-inactivate'} />
-      <ItemActivateAlert name={'item-activate'} />
-      <ItemBulkDeleteAlert name={'items-bulk-delete'} />
-    </div>
-  );
-}
+export default [
+  {
+    name: 'item-delete',
+    component: ItemDeleteAlert,
+  },
+  {
+    name: 'item-inactivate',
+    component: ItemInactivateAlert,
+  },
+  {
+    name: 'item-activate',
+    component: ItemActivateAlert,
+  },
+  {
+    name: 'items-bulk-delete',
+    component: ItemBulkDeleteAlert,
+  },
+];

src/containers/Items/ItemsList.js

@@ -6,7 +6,6 @@ import 'style/pages/Items/List.scss';
 import { DashboardPageContent } from 'components';
 
 import ItemsActionsBar from './ItemsActionsBar';
-import ItemsAlerts from './ItemsAlerts';
 import ItemsViewsTabs from './ItemsViewsTabs';
 import ItemsDataTable from './ItemsDataTable';
 
@@ -46,7 +45,6 @@ function ItemsList({
         <ItemsDataTable />
       </DashboardPageContent>
 
-      <ItemsAlerts />
     </ItemsListProvider>
   );
 }