message loader

src/components/ActivityLoader.js

@@ -0,0 +1,30 @@
+import { View } from "react-native";
+
+import { LoaderIndicator } from "../providers/LoadingProvider";
+
+export default ({
+  message,
+  defaultMessage = "Chargement...",
+  containerStyle = {},
+  indicatorProps = {},
+  messageStyle = {},
+}) => {
+  return (
+    <View
+      style={[
+        {
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        containerStyle,
+      ]}
+    >
+      <LoaderIndicator
+        message={message}
+        defaultMessage={defaultMessage}
+        messageStyle={messageStyle}
+        indicatorProps={indicatorProps}
+      />
+    </View>
+  );
+};

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>

src/screens/Home/Home.js

@@ -85,6 +85,7 @@ const Home = () => {
   const [menuAnchor, setMenuAnchor] = useState(null);
   const [menuProject, setMenuProject] = useState(null);
   const menuAnchorRef = useRef(null);
+  const testLoaderTimeoutRef = useRef(null);
 
   useEffect(() => {
     setActiveStageIndex((prev) => {
@@ -218,6 +219,15 @@ const Home = () => {
     stageRoute,
   ]);
 
+  useEffect(() => {
+    return () => {
+      if (testLoaderTimeoutRef.current) {
+        clearTimeout(testLoaderTimeoutRef.current);
+        testLoaderTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
   const songwriterAction = useMemo(
     () => getStageAction("songwriter", null),
     []
@@ -304,6 +314,7 @@ const Home = () => {
             onPress={handleStageAction}
             disabled={continueDisabled}
           />
+
           {/* <BorderGradientButton
             containerStyle={{ width: Platform.OS === "web" ? 250 : "100%" }}
             title={"Test Alert"}

src/screens/Library/MusicDetails.web.js

@@ -160,6 +160,8 @@ const MusicDetails = ({ route }) => {
     condition: !!projectId,
   });
 
+  console.log("project is : ", project);
+
   const { data: owner } = useDataFromRef({
     ref: project?.userId ? usersRef.doc(project.userId) : null,
     simpleRef: true,