From c1712edbda2ace9ccacef771b7ffaa9db1a13017 Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Mon, 27 May 2024 15:55:31 +0000
Subject: [PATCH] separate modal and backdrop, currently only loading modal is done. testing still need to happen

---
 src/components/modals/LoadingModal.tsx | 28 ++++++++++++++++++++++++++++
 src/contexts/Overlay.tsx               | 21 +++++++++++++--------
 2 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 src/components/modals/LoadingModal.tsx

diff --git a/src/components/modals/LoadingModal.tsx b/src/components/modals/LoadingModal.tsx
new file mode 100644
index 0000000..c8d7aa5
--- /dev/null
+++ b/src/components/modals/LoadingModal.tsx
@@ -0,0 +1,28 @@
+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;
diff --git a/src/contexts/Overlay.tsx b/src/contexts/Overlay.tsx
index 54ac5de..9e4b4a1 100644
--- a/src/contexts/Overlay.tsx
+++ b/src/contexts/Overlay.tsx
@@ -1,3 +1,4 @@
+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,
--
libgit2 0.27.1