From f8addf2a06173fe9acad325057e7509c5f944acb Mon Sep 17 00:00:00 2001
From: Hamza El Gatia <h.elgatia@axelor.com>
Date: Fri, 9 Feb 2024 18:48:51 +0100
Subject: [PATCH] feat: add process provider

---
 .../stock/src/screens/loader/LoaderScreen.js  |  16 +-
 .../core/src/app/ContextedApplication.tsx     |   2 -
 packages/core/src/app/ContextsProvider.tsx    |   5 +-
 .../templates/Loader/LoaderContext.tsx        | 298 ------------------
 .../templates/Loader/LoaderPopup.tsx          |  51 +--
 .../templates/Loader/LoaderToastNotifier.tsx  |  80 -----
 .../templates/Loader/ProcessProvider.ts       | 194 ++++++++++++
 .../src/components/templates/Loader/index.ts  |   4 +-
 .../templates/Loader/loader-helper.ts         |  21 ++
 .../src/components/templates/Loader/types.ts  |  51 +++
 .../templates/Loader/use-loader-listener.ts   | 113 ++-----
 11 files changed, 322 insertions(+), 513 deletions(-)
 delete mode 100644 packages/core/src/components/templates/Loader/LoaderContext.tsx
 delete mode 100644 packages/core/src/components/templates/Loader/LoaderToastNotifier.tsx
 create mode 100644 packages/core/src/components/templates/Loader/ProcessProvider.ts
 create mode 100644 packages/core/src/components/templates/Loader/loader-helper.ts
 create mode 100644 packages/core/src/components/templates/Loader/types.ts

diff --git a/packages/apps/stock/src/screens/loader/LoaderScreen.js b/packages/apps/stock/src/screens/loader/LoaderScreen.js
index 6c1ef2fbb2..a86646c0c3 100644
--- a/packages/apps/stock/src/screens/loader/LoaderScreen.js
+++ b/packages/apps/stock/src/screens/loader/LoaderScreen.js
@@ -37,11 +37,11 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {Button, Screen} from '@axelor/aos-mobile-ui';
-import {LoaderPopup, useLoader} from '@axelor/aos-mobile-core';
+import {LoaderPopup} from '@axelor/aos-mobile-core';
 
 // Screen for test Loader functionnalities
 const LoaderScreen = () => {
-  const [runProccess, setRunProccess] = useState(false);
+  const [start, setStart] = useState(false);
 
   const process = () =>
     new Promise(resolve => {
@@ -51,28 +51,26 @@ const LoaderScreen = () => {
     });
 
   const handleSuccessAction = () => {
-    setRunProccess(false);
+    setStart(false);
     console.log('Success action executed!');
   };
 
   const handleErrorAction = () => {
-    setRunProccess(false);
+    setStart(false);
     console.log('Error action executed!');
   };
 
-  const {loading} = useLoader();
-
   return (
     <Screen>
       <View>
         <Button
           title="Run process"
-          onPress={() => setRunProccess(true)}
-          disabled={loading}
+          onPress={() => setStart(true)}
+          disabled={start}
         />
         <LoaderPopup
+          start={start}
           process={process}
-          runProccess={runProccess}
           timeout={5000}
           onSuccess={handleSuccessAction}
           onError={handleErrorAction}
diff --git a/packages/core/src/app/ContextedApplication.tsx b/packages/core/src/app/ContextedApplication.tsx
index 6643ab6591..d34bf43f82 100644
--- a/packages/core/src/app/ContextedApplication.tsx
+++ b/packages/core/src/app/ContextedApplication.tsx
@@ -30,7 +30,6 @@ import {
   Camera,
   CameraScanner,
   HeaderBandList,
-  LoaderToastNotifier,
   Scanner,
   Toast,
 } from '../components';
@@ -88,7 +87,6 @@ const ContextedApplication = ({
         <NavigationContainer>
           <HeaderBandList />
           <LoadingIndicator />
-          <LoaderToastNotifier />
           <BlockInteractionMessage />
           <RootNavigator
             modules={modules}
diff --git a/packages/core/src/app/ContextsProvider.tsx b/packages/core/src/app/ContextsProvider.tsx
index 1531f6d69a..a5ac9df393 100644
--- a/packages/core/src/app/ContextsProvider.tsx
+++ b/packages/core/src/app/ContextsProvider.tsx
@@ -40,7 +40,6 @@ import {requestBuilder} from '../apiProviders/Standard/requests.helper';
 import {core_modelAPI, core_searchFields, core_sortFields} from '../models';
 import {HeaderBandProvider} from '../header';
 import {addModuleForms, formConfigsProvider} from '../forms';
-import {LoaderProvider} from '../components';
 
 const ApplicationContext = createContext(null);
 
@@ -167,9 +166,7 @@ const ContextsProvider = ({
               defaultTheme={defaultWritingTheme}
               writingStylesConfig={writingStylesConfig}>
               <ConfigProvider showModulesSubtitle={showModulesSubtitle}>
-                <HeaderBandProvider>
-                  <LoaderProvider>{children}</LoaderProvider>
-                </HeaderBandProvider>
+                <HeaderBandProvider>{children}</HeaderBandProvider>
               </ConfigProvider>
             </WritingThemeProvider>
           </ThemeProvider>
diff --git a/packages/core/src/components/templates/Loader/LoaderContext.tsx b/packages/core/src/components/templates/Loader/LoaderContext.tsx
deleted file mode 100644
index 6949da5c1f..0000000000
--- a/packages/core/src/components/templates/Loader/LoaderContext.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-/*
- * Axelor Business Solutions
- *
- * Copyright (C) 2024 Axelor (<http://axelor.com>).
- *
- * This program is free software: you can redistribute it and/or  modify
- * it under the terms of the GNU Affero General Public License, version 3,
- * as published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useReducer,
-} from 'react';
-
-export type LoaderStatus = 'ok' | 'error' | undefined;
-
-type callBack = () => void;
-
-interface LoaderContextState {
-  loading: boolean;
-  notifyMe: boolean;
-  showPopup: boolean;
-  status: LoaderStatus;
-  message: string;
-  finished: boolean;
-  disabled: boolean;
-  onSuccessCallBack: () => void;
-  onErrorCallBack: () => void;
-  setLoading: (option: boolean) => void;
-  setNotifyMe: (option: boolean) => void;
-  setShowPopup: (option: boolean) => void;
-  setStatus: (option: LoaderStatus) => void;
-  setMessage: (message: string) => void;
-  setFinished: (option: boolean) => void;
-  setDisabled: (option: boolean) => void;
-  setOnSuccessCallBack: (f: callBack) => void;
-  setOnErrorCallBack: (f: callBack) => void;
-}
-
-interface LoaderAction {
-  type: string;
-  payload: boolean | string | callBack | LoaderStatus;
-}
-
-const defaultLoaderContext = {
-  loading: false,
-  notifyMe: false,
-  showPopup: false,
-  status: null,
-  message: null,
-  finished: false,
-  disabled: false,
-  onSuccessCallBack: () => {},
-  onErrorCallBack: () => {},
-  setLoading: () => {
-    throw new Error('LoaderProvider should be mounted to set loading');
-  },
-  setNotifyMe: () => {
-    throw new Error('LoaderProvider should be mounted to set notify me');
-  },
-  setShowPopup: () => {
-    throw new Error('LoaderProvider should be mounted to set show popup');
-  },
-  setStatus: () => {
-    throw new Error('LoaderProvider should be mounted to set status');
-  },
-  setMessage: () => {
-    throw new Error('LoaderProvider should be mounted to set message');
-  },
-  setFinished: () => {
-    throw new Error('LoaderProvider should be mounted to set finished');
-  },
-  setDisabled: () => {
-    throw new Error('LoaderProvider should be mounted to set disabled');
-  },
-  setOnSuccessCallBack: () => {
-    throw new Error(
-      'LoaderProvider should be mounted to set on success callback',
-    );
-  },
-  setOnErrorCallBack: () => {
-    throw new Error(
-      'LoaderProvider should be mounted to set on success callback',
-    );
-  },
-};
-
-const LoaderContext = createContext<LoaderContextState>(defaultLoaderContext);
-
-const actionTypes = {
-  setLoading: 'setLoading',
-  setNotifyMe: 'setNotifyMe',
-  setShowPopup: 'setShowPopup',
-  setStatus: 'setStatus',
-  setMessage: 'setMessage',
-  setFinished: 'setFinished',
-  setDisabled: 'setDisabled',
-  setOnSuccessCallBack: 'setOnSuccessCallBack',
-  setOnErrorCallBack: 'setOnErrorCallBack',
-};
-
-const LoaderReducer = (
-  state: LoaderContextState,
-  action: LoaderAction,
-): LoaderContextState => {
-  switch (action.type) {
-    case actionTypes.setLoading: {
-      return {
-        ...state,
-        loading: action.payload as boolean,
-      };
-    }
-    case actionTypes.setNotifyMe: {
-      return {
-        ...state,
-        notifyMe: action.payload as boolean,
-      };
-    }
-    case actionTypes.setShowPopup: {
-      return {
-        ...state,
-        showPopup: action.payload as boolean,
-      };
-    }
-    case actionTypes.setStatus: {
-      return {
-        ...state,
-        status: action.payload as LoaderStatus,
-      };
-    }
-    case actionTypes.setMessage: {
-      return {
-        ...state,
-        message: action.payload as string,
-      };
-    }
-    case actionTypes.setFinished: {
-      return {
-        ...state,
-        finished: action.payload as boolean,
-      };
-    }
-    case actionTypes.setDisabled: {
-      return {
-        ...state,
-        disabled: action.payload as boolean,
-      };
-    }
-    case actionTypes.setOnSuccessCallBack: {
-      return {
-        ...state,
-        onSuccessCallBack: action.payload as callBack,
-      };
-    }
-    case actionTypes.setOnErrorCallBack: {
-      return {
-        ...state,
-        onErrorCallBack: action.payload as callBack,
-      };
-    }
-  }
-};
-
-const actions = {
-  setLoading: option => ({
-    type: actionTypes.setLoading,
-    payload: option,
-  }),
-  setNotifyMe: option => ({
-    type: actionTypes.setNotifyMe,
-    payload: option,
-  }),
-  setShowPopup: option => ({
-    type: actionTypes.setShowPopup,
-    payload: option,
-  }),
-  setStatus: status => ({
-    type: actionTypes.setStatus,
-    payload: status,
-  }),
-  setMessage: message => ({
-    type: actionTypes.setMessage,
-    payload: message,
-  }),
-  setFinished: option => ({
-    type: actionTypes.setFinished,
-    payload: option,
-  }),
-  setDisabled: option => ({
-    type: actionTypes.setDisabled,
-    payload: option,
-  }),
-  setOnSuccessCallBack: f => ({
-    type: actionTypes.setOnSuccessCallBack,
-    payload: f,
-  }),
-  setOnErrorCallBack: f => ({
-    type: actionTypes.setOnErrorCallBack,
-    payload: f,
-  }),
-};
-
-export const LoaderProvider = ({children}) => {
-  const [state, dispatch] = useReducer(LoaderReducer, defaultLoaderContext);
-
-  const setLoading = useCallback(
-    option => dispatch(actions.setLoading(option)),
-    [],
-  );
-
-  const setNotifyMe = useCallback(
-    option => dispatch(actions.setNotifyMe(option)),
-    [],
-  );
-
-  const setShowPopup = useCallback(
-    option => dispatch(actions.setShowPopup(option)),
-    [],
-  );
-
-  const setStatus = useCallback(
-    status => dispatch(actions.setStatus(status)),
-    [],
-  );
-
-  const setMessage = useCallback(
-    message => dispatch(actions.setMessage(message)),
-    [],
-  );
-
-  const setFinished = useCallback(
-    option => dispatch(actions.setFinished(option)),
-    [],
-  );
-
-  const setDisabled = useCallback(
-    option => dispatch(actions.setDisabled(option)),
-    [],
-  );
-
-  const setOnSuccessCallBack = useCallback(
-    f => dispatch(actions.setOnSuccessCallBack(f)),
-    [],
-  );
-
-  const setOnErrorCallBack = useCallback(
-    f => dispatch(actions.setOnErrorCallBack(f)),
-    [],
-  );
-
-  const LoaderContextState = useMemo<LoaderContextState>(
-    () => ({
-      ...state,
-      setLoading,
-      setNotifyMe,
-      setShowPopup,
-      setStatus,
-      setMessage,
-      setFinished,
-      setDisabled,
-      setOnSuccessCallBack,
-      setOnErrorCallBack,
-    }),
-    [
-      state,
-      setLoading,
-      setNotifyMe,
-      setShowPopup,
-      setStatus,
-      setMessage,
-      setFinished,
-      setDisabled,
-      setOnSuccessCallBack,
-      setOnErrorCallBack,
-    ],
-  );
-
-  return (
-    <LoaderContext.Provider value={LoaderContextState}>
-      {children}
-    </LoaderContext.Provider>
-  );
-};
-
-export const useLoader = (): LoaderContextState =>
-  useContext<LoaderContextState>(LoaderContext);
diff --git a/packages/core/src/components/templates/Loader/LoaderPopup.tsx b/packages/core/src/components/templates/Loader/LoaderPopup.tsx
index 7cc6955260..1825de5211 100644
--- a/packages/core/src/components/templates/Loader/LoaderPopup.tsx
+++ b/packages/core/src/components/templates/Loader/LoaderPopup.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {useEffect, useRef} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {ActivityIndicator, Dimensions, StyleSheet, View} from 'react-native';
 import {
   BlockInteractionScreen,
@@ -30,53 +30,54 @@ import {
 import {useTranslator} from '../../../i18n';
 import {useNavigation} from '../../../hooks/use-navigation';
 import useLoaderListner from './use-loader-listener';
-import {useLoader} from './LoaderContext';
+import {processProvider} from './ProcessProvider';
 
 interface LoaderPopupProps {
   process: () => Promise<any>;
   onSuccess: () => void;
   onError: () => void;
-  runProccess: boolean;
-  timeout: number;
-  disabled: boolean;
+  start?: boolean;
+  disabled?: boolean;
+  timeout?: number;
 }
 
 const LoaderPopup = ({
   process,
   onSuccess,
   onError,
-  runProccess = false,
-  timeout = 100,
+  start = false,
   disabled = false,
+  timeout = 100,
 }: LoaderPopupProps) => {
   const navigation = useNavigation();
   const I18n = useTranslator();
   const Colors = useThemeColor();
   const {setActivityIndicator} = useConfig();
 
-  const timeoutRef = useRef(null);
+  const [showPopup, setShowPopup] = useState<boolean>();
 
-  const {loading, notifyMe, showPopup, setNotifyMe, setShowPopup} = useLoader();
+  const timeoutRef = useRef(null);
 
-  const {listener} = useLoaderListner({
-    process,
-    onSuccess,
-    onError,
-    disabled,
-  });
+  const {key, loading} = useLoaderListner(
+    {
+      disabled,
+      process,
+      onSuccess,
+      onError,
+    },
+    () => setShowPopup(false),
+  );
 
-  useEffect(() => {
-    if (notifyMe) {
-      navigation.goBack();
-    }
-  }, [navigation, notifyMe]);
+  const handleNotifyMe = useCallback(() => {
+    processProvider.notifyMe(key);
+    navigation.goBack();
+  }, [key, navigation]);
 
   useEffect(() => {
-    if (runProccess) {
-      listener();
+    if (start) {
+      processProvider.runProcess(key, I18n);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runProccess]);
+  }, [start, key, I18n]);
 
   useEffect(() => {
     if (loading) {
@@ -120,7 +121,7 @@ const LoaderPopup = ({
         <Button
           iconName="check-lg"
           title={I18n.t('Base_Loader_NotifyMe')}
-          onPress={() => setNotifyMe(true)}
+          onPress={handleNotifyMe}
         />
       </Card>
     </BlockInteractionScreen>
diff --git a/packages/core/src/components/templates/Loader/LoaderToastNotifier.tsx b/packages/core/src/components/templates/Loader/LoaderToastNotifier.tsx
deleted file mode 100644
index 766f18b052..0000000000
--- a/packages/core/src/components/templates/Loader/LoaderToastNotifier.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Axelor Business Solutions
- *
- * Copyright (C) 2024 Axelor (<http://axelor.com>).
- *
- * This program is free software: you can redistribute it and/or  modify
- * it under the terms of the GNU Affero General Public License, version 3,
- * as published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import {useEffect} from 'react';
-import {useTranslator} from '../../../i18n';
-import {showToastMessage} from '../../../utils/show-toast-message';
-import {useLoader} from './LoaderContext';
-
-const LoaderToastNotifier = () => {
-  const I18n = useTranslator();
-
-  const {
-    notifyMe,
-    status,
-    message,
-    finished,
-    disabled,
-    setFinished,
-    onSuccessCallBack,
-    onErrorCallBack,
-  } = useLoader();
-
-  useEffect(() => {
-    if (finished) {
-      if (!notifyMe) {
-        status === 'ok' ? onSuccessCallBack() : onErrorCallBack();
-      } else {
-        if (status === 'ok') {
-          showToastMessage({
-            type: 'success',
-            position: 'top',
-            topOffset: 30,
-            text1: I18n.t('Base_Success'),
-            text2: message || I18n.t('Base_Loader_ProccessSuccessMessage'),
-            onPress: () => !disabled && onSuccessCallBack(),
-          });
-        } else {
-          showToastMessage({
-            type: 'error',
-            position: 'top',
-            topOffset: 30,
-            text1: I18n.t('Base_Error'),
-            text2: message || I18n.t('Base_Loader_ProccessErrorMessage'),
-            onPress: () => !disabled && onErrorCallBack(),
-          });
-        }
-      }
-      setFinished(false);
-    }
-  }, [
-    notifyMe,
-    status,
-    message,
-    finished,
-    disabled,
-    setFinished,
-    onSuccessCallBack,
-    onErrorCallBack,
-    I18n,
-  ]);
-
-  return null;
-};
-
-export default LoaderToastNotifier;
diff --git a/packages/core/src/components/templates/Loader/ProcessProvider.ts b/packages/core/src/components/templates/Loader/ProcessProvider.ts
new file mode 100644
index 0000000000..1861312d73
--- /dev/null
+++ b/packages/core/src/components/templates/Loader/ProcessProvider.ts
@@ -0,0 +1,194 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {TranslatorProps} from '../../../i18n';
+import {showToastMessage} from '../../../utils/show-toast-message';
+import {
+  ProcessOption,
+  ProcessStatus,
+  ProcessItem,
+  callBack,
+  EventType,
+  Event,
+} from './types';
+
+class ProcessProvider {
+  private events: Map<string, Event>;
+  private processMap: Map<string, ProcessItem>;
+
+  constructor() {
+    this.events = new Map();
+    this.processMap = new Map();
+
+    this.notifyMe = this.notifyMe.bind(this);
+    this.runProcess = this.runProcess.bind(this);
+    this.executeProcess = this.executeProcess.bind(this);
+    this.onStart = this.onStart.bind(this);
+    this.onFinish = this.onFinish.bind(this);
+    this.onCompleted = this.onCompleted.bind(this);
+    this.onFailed = this.onFailed.bind(this);
+  }
+
+  on(key: string, e: EventType, c: callBack) {
+    const event = this.events.has(key) ? this.events.get(key) : ({} as Event);
+
+    if (!event[e]) {
+      event[e] = [];
+    }
+
+    event[e].push(c);
+
+    this.events.set(key, event);
+  }
+
+  emit(key: string, e: EventType, ...args) {
+    if (this.events.has(key) && this.events.get(key)[e]) {
+      this.events.get(key)[e].forEach(c => c(...args));
+    }
+  }
+
+  registerProcess(key: string, p: ProcessOption) {
+    this.processMap.set(key, {
+      key,
+      ...p,
+      loading: false,
+      notifyMe: false,
+      message: null,
+      status: null,
+      completed: false,
+    });
+  }
+
+  getProcess(key: string): ProcessItem {
+    if (!this.processMap.has(key)) {
+      console.error(`Process with key ${key} not found.`);
+      return null;
+    }
+    return {...this.processMap.get(key)};
+  }
+
+  getProcessStatus(key: string): ProcessStatus {
+    if (!this.processMap.has(key)) {
+      console.error(`Process with key ${key} not found.`);
+      return null;
+    }
+    return this.processMap.get(key).status;
+  }
+
+  notifyMe(key: string) {
+    const p = this.processMap.get(key);
+    this.processMap.set(key, {...p, notifyMe: true});
+  }
+
+  notifyMeCallBack(key: string) {
+    const p = this.processMap.get(key);
+    this.processMap.set(key, {...p, notifyMe: true});
+  }
+
+  async runProcess(key: string, I18n: TranslatorProps) {
+    if (!this.processMap.has(key)) {
+      throw new Error(`Process with key ${key} not found.`);
+    }
+
+    const p = this.processMap.get(key);
+    this.onStart(p);
+    this.executeProcess(p, I18n);
+  }
+
+  private onStart(p: ProcessItem) {
+    this.processMap.set(p.key, {
+      ...p,
+      loading: true,
+      status: ProcessStatus.RUNNING,
+    });
+
+    this.on(p.key, EventType.COMPLETED, this.onCompleted);
+    this.on(p.key, EventType.FAILED, this.onFailed);
+    this.emit(p.key, EventType.STARTED);
+  }
+
+  private async executeProcess(p: ProcessItem, I18n: TranslatorProps) {
+    try {
+      const response = await p.process();
+      this.onFinish(p, ProcessStatus.COMPLETED, response, I18n);
+    } catch (error) {
+      this.onFinish(p, ProcessStatus.FAILED, error, I18n);
+    }
+  }
+
+  private onFinish(
+    p: ProcessItem,
+    status: ProcessStatus,
+    message: string,
+    I18n: TranslatorProps,
+  ) {
+    this.processMap.set(p.key, {
+      ...p,
+      status,
+      loading: false,
+      message: message,
+      completed: true,
+    });
+
+    this.emit(
+      p.key,
+      status === ProcessStatus.COMPLETED
+        ? EventType.COMPLETED
+        : EventType.FAILED,
+      p.key,
+      I18n,
+    );
+  }
+
+  private onCompleted(key: string, I18n: TranslatorProps) {
+    console.log('onCompleted', key);
+    console.log('processMap', this.processMap);
+    const {notifyMe, message, disabled, onSuccess} = this.processMap.get(key);
+    console.log('notifyMe', notifyMe);
+    if (!notifyMe) {
+      onSuccess();
+    } else {
+      showToastMessage({
+        type: 'success',
+        position: 'top',
+        topOffset: 30,
+        text1: I18n.t('Base_Success'),
+        text2: message || I18n.t('Base_Loader_ProccessSuccessMessage'),
+        onPress: () => !disabled && onSuccess(),
+      });
+    }
+  }
+
+  private onFailed(key: string, I18n: TranslatorProps) {
+    const {notifyMe, message, disabled, onError} = this.processMap.get(key);
+    if (!notifyMe) {
+      onError();
+    } else {
+      showToastMessage({
+        type: 'error',
+        position: 'top',
+        topOffset: 30,
+        text1: I18n.t('Base_Error'),
+        text2: message || I18n.t('Base_Loader_ProccessErrorMessage'),
+        onPress: () => !disabled && onError(),
+      });
+    }
+  }
+}
+
+export const processProvider = new ProcessProvider();
diff --git a/packages/core/src/components/templates/Loader/index.ts b/packages/core/src/components/templates/Loader/index.ts
index 68dd070ccb..6a54e97a96 100644
--- a/packages/core/src/components/templates/Loader/index.ts
+++ b/packages/core/src/components/templates/Loader/index.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export * from './LoaderContext';
 export {default as LoaderPopup} from './LoaderPopup';
-export {default as LoaderToastNotifier} from './LoaderToastNotifier';
+export * from './ProcessProvider';
+export * from './types';
 export {default as useLoaderListner} from './use-loader-listener';
diff --git a/packages/core/src/components/templates/Loader/loader-helper.ts b/packages/core/src/components/templates/Loader/loader-helper.ts
new file mode 100644
index 0000000000..489d5ff01f
--- /dev/null
+++ b/packages/core/src/components/templates/Loader/loader-helper.ts
@@ -0,0 +1,21 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export const generateUniqueID = () => {
+  return new Date().getTime().toString();
+};
diff --git a/packages/core/src/components/templates/Loader/types.ts b/packages/core/src/components/templates/Loader/types.ts
new file mode 100644
index 0000000000..de306ac4f2
--- /dev/null
+++ b/packages/core/src/components/templates/Loader/types.ts
@@ -0,0 +1,51 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export type callBack = (...args) => void;
+
+export enum EventType {
+  STARTED = 'STARTED',
+  COMPLETED = 'COMPLETED',
+  FAILED = 'FAILED',
+}
+
+export type Event = {
+  [e in EventType]: callBack[];
+};
+
+export enum ProcessStatus {
+  RUNNING = 'RUNNING',
+  COMPLETED = 'COMPLETED',
+  FAILED = 'FAILED',
+}
+
+export type ProcessOption = {
+  disabled: boolean;
+  process: () => Promise<any>;
+  onSuccess: () => void;
+  onError: () => void;
+};
+
+export type ProcessItem = ProcessOption & {
+  key: string;
+  loading: boolean;
+  notifyMe: boolean;
+  status: ProcessStatus;
+  message: string;
+  completed: boolean;
+};
diff --git a/packages/core/src/components/templates/Loader/use-loader-listener.ts b/packages/core/src/components/templates/Loader/use-loader-listener.ts
index 42dbcf1391..f917bcac80 100644
--- a/packages/core/src/components/templates/Loader/use-loader-listener.ts
+++ b/packages/core/src/components/templates/Loader/use-loader-listener.ts
@@ -16,104 +16,31 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import {useCallback, useEffect, useMemo, useState} from 'react';
-import {LoaderStatus, useLoader} from './LoaderContext';
+import {useEffect, useMemo, useState} from 'react';
+import {EventType, ProcessOption} from './types';
+import {processProvider} from './ProcessProvider';
+import {generateUniqueID} from './loader-helper';
 
-interface LoaderListenerProps {
-  process: () => Promise<any>;
-  onFinish?: (status: LoaderStatus) => void;
-  onSuccess?: () => void;
-  onError?: () => void;
-  disabled?: boolean;
-}
+const useLoaderListner = (p: ProcessOption, onFinish = () => {}) => {
+  const [key, setKey] = useState<string>();
+  const [loading, setLoading] = useState<boolean>(false);
 
-const useLoaderListner = ({
-  process,
-  onFinish = () => {},
-  onSuccess = () => {},
-  onError = () => {},
-  disabled = false,
-}: LoaderListenerProps) => {
-  const [start, setStart] = useState(false);
-
-  const {
-    setLoading,
-    setNotifyMe,
-    setShowPopup,
-    setStatus,
-    setMessage,
-    setFinished,
-    setDisabled,
-    setOnSuccessCallBack,
-    setOnErrorCallBack,
-  } = useLoader();
-
-  const onFinishCallBack = useCallback(
-    (status: LoaderStatus, response: any) => {
-      setLoading(false);
-      setShowPopup(false);
-      setStatus(status);
-      setMessage(response);
-      setFinished(true);
-      onFinish(status);
-    },
-    [setLoading, setFinished, setShowPopup, setStatus, setMessage, onFinish],
-  );
-
-  const executeProcess = useCallback(async () => {
-    setStart(false);
-    setLoading(true);
-
-    try {
-      const response = await process();
-      onFinishCallBack('ok', response);
-    } catch (error) {
-      onFinishCallBack('error', error);
-    }
-  }, [process, setLoading, onFinishCallBack]);
-
-  const processCallBack = useCallback(
-    (_start: boolean) => {
-      if (!_start) {
-        return;
-      }
-
-      executeProcess();
-    },
-    [executeProcess],
-  );
-
-  const handleListener = useCallback(() => {
-    setStart(true);
+  const onFinishCallback = () => {
     setLoading(false);
-
-    setNotifyMe(false);
-    setShowPopup(false);
-    setStatus(null);
-    setMessage(null);
-    setDisabled(disabled);
-
-    setOnSuccessCallBack(onSuccess);
-    setOnErrorCallBack(onError);
-  }, [
-    disabled,
-    onSuccess,
-    onError,
-    setLoading,
-    setNotifyMe,
-    setShowPopup,
-    setStatus,
-    setMessage,
-    setDisabled,
-    setOnSuccessCallBack,
-    setOnErrorCallBack,
-  ]);
+    onFinish();
+  };
 
   useEffect(() => {
-    processCallBack(start);
-  }, [start, processCallBack]);
-
-  return useMemo(() => ({listener: handleListener}), [handleListener]);
+    const unid = generateUniqueID();
+    setKey(unid);
+    processProvider.registerProcess(unid, p);
+    processProvider.on(unid, EventType.STARTED, () => setLoading(true));
+    processProvider.on(unid, EventType.COMPLETED, onFinishCallback);
+    processProvider.on(unid, EventType.FAILED, onFinishCallback);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return useMemo(() => ({key, loading}), [key, loading]);
 };
 
 export default useLoaderListner;