loading messages

src/providers/LoadingProvider.js

@@ -1,13 +1,15 @@
+import { ActivityIndicator, Text, View } from "react-native";
 import React, { useGlobal } from "reactn";
-import { ActivityIndicator, View } from "react-native";
 
-import { Palette } from "../styles";
 import useLayoutType from "../hooks/useLayoutType";
-
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
 export default ({ children }) => {
   const [isGlobalLoading] = useGlobal("_isLoading");
+  const [loadingMessage] = useGlobal("_loadingMessage");
 
   const { isDesktopWeb = false, isMobileWeb = false } = useLayoutType();
+  const isWeb = isDesktopWeb || isMobileWeb;
 
   return (
     <>
@@ -30,17 +32,35 @@ export default ({ children }) => {
             isDesktopWeb
               ? { position: "fixed" }
               : isMobileWeb
-              ? { position: "fixed" }
-              : { position: "absolute" },
+                ? { position: "fixed" }
+                : { position: "absolute" },
           ]}
         >
-          <LoaderIndicator />
+          <LoaderIndicator
+            isWeb={isWeb}
+            message={isWeb ? loadingMessage : null}
+          />
         </View>
       )}
     </>
   );
 };
 
-export const LoaderIndicator = () => {
-  return <ActivityIndicator size={"large"} color={Palette.primary} />;
+export const LoaderIndicator = ({ isWeb = false, message = null }) => {
+  return (
+    <View style={{ alignItems: "center", gap: 10 }}>
+      <ActivityIndicator size={"large"} color={Palette.primary} />
+      {isWeb && message ? (
+        <Text
+          style={{
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+            textAlign: "center",
+          }}
+        >
+          {message}
+        </Text>
+      ) : null}
+    </View>
+  );
 };