separate modal and backdrop, currently only loading modal is done. testing still need to happen

src/components/modals/LoadingModal.tsx

+import Box from "@components/bases/Box";
+import { ActivityIndicator, Text } from "react-native";
+
+const LoadingModal = () => {
+	return (
+		<Box
+			width={300}
+			height={200}
+			backgroundColor={"white"}
+			alignItems={"center"}
+			justifyContent={"center"}
+			alignSelf={"center"}
+			marginTop={"x240"}
+			position={"absolute"}
+			zIndex={10}
+			borderRadius={20}
+			gap={"m"}
+			shadowColor={"black"}
+			shadowOffset={{ width: 0, height: 0 }}
+			shadowOpacity={0.5}
+		>
+			<ActivityIndicator size={"large"} />
+			<Text>Veuillez patienter</Text>
+		</Box>
+	);
+};
+
+export default LoadingModal;

src/contexts/Overlay.tsx

+import LoadingModal from "@components/modals/LoadingModal";
 import { createContext, useContext, useState } from "react";
 import { View } from "react-native";
 
@@ -12,14 +13,17 @@ export const OverlayContext = createContext<IoverlayContext>({
 });
 
 export const OverlayProvider = ({ children }: { children: React.ReactNode }) => {
-	const [overlayVisible, setOverlayVisible] = useState(false);
+	const [showBackdrop, setShowBackdrop] = useState(true);
+	const [loadingModalVisible, setLoadingModalVisible] = useState(true);
 
 	const showOverlay = () => {
-		setOverlayVisible(true);
+		setShowBackdrop(true);
+		setLoadingModalVisible(true);
 	};
 
 	const hideOverlay = () => {
-		setOverlayVisible(false);
+		setShowBackdrop(false);
+		setLoadingModalVisible(false);
 	};
 
 	return (
@@ -30,8 +34,9 @@ export const OverlayProvider = ({ children }: { children: React.ReactNode }) =>
 			}}
 		>
 			{children}
-			{/* <OverlayComponent /> */}
-			{overlayVisible && <OverlayComponent />}
+			{showBackdrop && <OverlayBackdrop />}
+
+			{loadingModalVisible && <LoadingModal />}
 		</OverlayContext.Provider>
 	);
 };
@@ -40,15 +45,15 @@ export const useOverlayContext = () => {
 	return useContext(OverlayContext);
 };
 
-const OverlayComponent = () => {
+const OverlayBackdrop = () => {
 	return (
 		<View
 			style={{
 				flex: 1,
 				width: "100%",
 				height: "100%",
-				justifyContent: "center",
-				alignItems: "center",
+				// justifyContent: "center",
+				// alignItems: "center",
 				zIndex: 10,
 				backgroundColor: "black",
 				opacity: 0.5,