feat: add LoaderPopup component

packages/apps/stock/src/screens/loader/LoaderScreen.js

@@ -37,15 +37,15 @@
 import React from 'react';
 import {Button, View} from 'react-native';
 import {Screen} from '@axelor/aos-mobile-ui';
-import {useLoaderListner} from '@axelor/aos-mobile-core';
+import {LoaderPopup, useLoaderListner} from '@axelor/aos-mobile-core';
 
 // Screen for test Loader functionnalities
 const LoaderScreen = () => {
   const process = () =>
     new Promise(resolve => {
       setTimeout(() => {
         resolve('Process finished');
-      }, 10000);
+      }, 15000);
     });
 
   const handleCustomAction = () => {
@@ -61,6 +61,7 @@ const LoaderScreen = () => {
     <Screen>
       <View>
         <Button title="check process" onPress={trigger} disabled={loading} />
+        <LoaderPopup loading={loading} timeout={5000} />
       </View>
     </Screen>
   );

packages/core/src/components/external/Loader/LoaderPopup.tsx

@@ -0,0 +1,109 @@
+/*
+ * 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, {useEffect, useState} from 'react';
+import {
+  BlockInteractionScreen,
+  Button,
+  Card,
+  Label,
+  Text,
+  useConfig,
+  useThemeColor,
+} from '@axelor/aos-mobile-ui';
+import {ActivityIndicator, Dimensions, StyleSheet, View} from 'react-native';
+import {useTranslator} from '../../../i18n';
+
+interface LoaderPopupProps {
+  loading: boolean;
+  timeout: number;
+}
+
+const LoaderPopup = ({loading, timeout = 100}: LoaderPopupProps) => {
+  const I18n = useTranslator();
+  const Colors = useThemeColor();
+  const {setActivityIndicator} = useConfig();
+
+  const [showPopup, setShowPopup] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (loading && !showPopup) {
+      setActivityIndicator(true);
+    }
+
+    const timerId = setTimeout(() => {
+      setActivityIndicator(false);
+      setShowPopup(true);
+    }, timeout);
+
+    return () => clearTimeout(timerId);
+  }, [timeout, loading, showPopup, setActivityIndicator]);
+
+  if (!loading || !showPopup) {
+    return null;
+  }
+
+  return (
+    <BlockInteractionScreen hideHeader={true}>
+      <Card style={styles.popupContainer}>
+        <Label
+          type="danger"
+          message={I18n.t('Base_Loading_DoNotCloseTheApp')}
+          iconName="exclamation-triangle-fill"
+        />
+        <View style={styles.activityIndicatorContainer}>
+          <ActivityIndicator
+            size="large"
+            color={Colors.primaryColor.background}
+          />
+          <Text style={styles.loadingLabel}>
+            {I18n.t('Base_Loader_LoadingInProgress')}
+          </Text>
+        </View>
+        <Button
+          iconName="check-lg"
+          title={I18n.t('Base_Loader_NotifyMeWantItIsReady')}
+        />
+      </Card>
+    </BlockInteractionScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  popupContainer: {
+    position: 'absolute',
+    width: 350,
+    top: Dimensions.get('window').height * 0.2,
+    left: Dimensions.get('window').width * 0.05,
+    elevation: 24,
+    shadowOpacity: 12,
+    paddingVertical: 10,
+  },
+  activityIndicatorContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 20,
+  },
+  loadingLabel: {
+    fontWeight: 'bold',
+  },
+});
+
+export default LoaderPopup;

packages/core/src/components/external/Loader/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 {default as LoaderPopup} from './LoaderPopup';
+export {default as useLoaderListner} from './use-loader-listener';

packages/core/src/components/external/index.js

@@ -20,9 +20,9 @@ export {default as Camera} from './Camera/Camera';
 export {default as CameraScanner} from './CameraScanner/CameraScanner';
 export {default as CodeHighlighter} from './CodeHighlighter/CodeHighlighter';
 export * from './CodeHighlighter/code-highlighter.helper';
+export * from './Loader';
 export {default as PlanningView} from './PlanningView/PlanningView';
 export {default as Scanner} from './Scanner/Scanner';
 export {default as Stopwatch} from './Stopwatch/Stopwatch';
 export {default as Timer} from './Timer/Timer';
 export * from './Toast';
-export {default as useLoaderListner} from './Loader/use-loader-listener';

packages/core/src/i18n/translations/en.json

@@ -158,6 +158,9 @@
   "Base_Dashboard": "Dashboard",
   "Base_Dashboard_Misconfigured": "This dashboard is misconfigured, please contact your administrator.",
   "Base_Dashboard_RefreshConfig": "Refresh dashboard",
+  "Base_Loader_LoadingInProgress": "Loading in progress",
+  "Base_Loader_NotifyMeWantItIsReady": "Notify me when it's ready",
+  "Base_Loading_DoNotCloseTheApp": "Do not close the application until the process is done.",
   "Base_SliceAction_FetchAttachedFiles": "fetch attached files",
   "Base_SliceAction_FetchFilesDetails": "fetch file details",
   "Base_SliceAction_FetchMetaModule": "fetch meta modules",

packages/core/src/i18n/translations/fr.json

@@ -158,6 +158,9 @@
   "Base_Dashboard": "Tableau de bord",
   "Base_Dashboard_Misconfigured": "Ce tableau de bord est mal configuré, veuillez contacter votre administrateur.",
   "Base_Dashboard_RefreshConfig": "Actualiser le tableau de bord",
+  "Base_Loader_LoadingInProgress": "Chargement en cours",
+  "Base_Loader_NotifyMeWantItIsReady": "Me prévenir lorsqu'il est prêt",
+  "Base_Loading_DoNotCloseTheApp": "Veuillez ne pas fermer l'application avant que le processus soit terminé.",
   "Base_SliceAction_FetchAttachedFiles": "récupération des fichiers joints",
   "Base_SliceAction_FetchFilesDetails": "récupération des détails du fichier",
   "Base_SliceAction_FetchMetaModule": "récupération des modules",