message loader

src/providers/LoadingProvider.js

@@ -9,8 +9,6 @@ export default ({ children }) => {
   const [loadingMessage] = useGlobal("_loadingMessage");
 
   const { isDesktopWeb = false, isMobileWeb = false } = useLayoutType();
-  const isWeb = isDesktopWeb || isMobileWeb;
-
   return (
     <>
       {children}
@@ -36,29 +34,47 @@ export default ({ children }) => {
                 : { position: "absolute" },
           ]}
         >
-          <LoaderIndicator
-            isWeb={isWeb}
-            message={isWeb ? loadingMessage : null}
-          />
+          <LoaderIndicator message={loadingMessage ?? undefined} />
         </View>
       )}
     </>
   );
 };
 
-export const LoaderIndicator = ({ isWeb = false, message = null }) => {
+export const LoaderIndicator = ({
+  message,
+  defaultMessage = "Chargement...",
+  messageStyle = null,
+  indicatorProps = {},
+}) => {
+  const {
+    size = "large",
+    color = Palette.primary,
+    ...restIndicatorProps
+  } = indicatorProps;
+
+  const resolvedMessage =
+    message === undefined ? defaultMessage : message;
+  const shouldShowMessage =
+    resolvedMessage !== null &&
+    resolvedMessage !== undefined &&
+    String(resolvedMessage).length > 0;
+
   return (
     <View style={{ alignItems: "center", gap: 10 }}>
-      <ActivityIndicator size={"large"} color={Palette.primary} />
-      {isWeb && message ? (
+      <ActivityIndicator size={size} color={color} {...restIndicatorProps} />
+      {shouldShowMessage ? (
         <Text
-          style={{
-            color: Palette.white,
-            fontFamily: FONT_FAMILY.InterRegular,
-            textAlign: "center",
-          }}
+          style={[
+            {
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterRegular,
+              textAlign: "center",
+            },
+            messageStyle,
+          ]}
         >
-          {message}
+          {resolvedMessage}
         </Text>
       ) : null}
     </View>