65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { StyleSheet, View, Image } from "react-native";
|
|
import { useUiStore } from "~/lib/stores";
|
|
|
|
const GlobalLoadingOverlay: React.FC = () => {
|
|
const isLoading = useUiStore((state) => state.isLoading);
|
|
const isOpaque = useUiStore((state) => state.isOpaque);
|
|
|
|
if (!isLoading) {
|
|
return null;
|
|
}
|
|
|
|
// Opaque mode: full screen white background with primary loader
|
|
if (isOpaque) {
|
|
return (
|
|
<View pointerEvents="auto" style={styles.overlay}>
|
|
<View style={styles.opaqueBackdrop} />
|
|
<Image
|
|
source={require("../../assets/gif/AmbaPayLogo.gif")}
|
|
style={{ width: 280, height: 280 }}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Default mode: semi-transparent overlay with loader
|
|
return (
|
|
<View pointerEvents="auto" style={styles.overlay}>
|
|
<View style={styles.backdrop} />
|
|
<View style={styles.loaderContainer}>
|
|
<Image
|
|
source={require("../../assets/gif/AmbaPayLogo.gif")}
|
|
style={{ width: 280, height: 280 }}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
zIndex: 1000,
|
|
},
|
|
backdrop: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: "rgba(0, 0, 0, 0.25)",
|
|
},
|
|
opaqueBackdrop: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
loaderContainer: {
|
|
paddingVertical: 24,
|
|
paddingHorizontal: 32,
|
|
borderRadius: 16,
|
|
},
|
|
});
|
|
|
|
export default GlobalLoadingOverlay;
|