feat: image loader

Author: wsdt

mobile/components/OEncounter/OEncounter.tsx

@@ -12,6 +12,7 @@ import {
     OButtonSmall,
 } from "@/components/OButtonSmall/OButtonSmall";
 import { OEncounterStrike } from "@/components/OEncounterStrike/OEncounterStrike";
+import { OImageWithLoader } from "@/components/OImageWithLoader/OImageWithLoader";
 import OMessageModal from "@/components/OMessageModal/OMessageModal";
 import {
     EACTION_ENCOUNTERS,
@@ -28,7 +29,7 @@ import { getValidImgURI } from "@/utils/media.utils";
 import { MaterialIcons } from "@expo/vector-icons";
 import * as React from "react";
 import { useState } from "react";
-import { Image, StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import { Dropdown } from "react-native-element-dropdown";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { TourGuideZone, useTourGuideController } from "rn-tourguide";
@@ -135,9 +136,9 @@ const OEncounter = (props: ISingleEncounterProps) => {
                             });
                         }}
                     >
-                        <Image
+                        <OImageWithLoader
                             style={styles.profileImage}
-                            contentFit="cover"
+                            resizeMode="cover"
                             source={{
                                 uri: getValidImgURI(
                                     encounterProfile.otherUser.imageURIs[0],

mobile/components/OImageWithLoader/OImageWithLoader.tsx

@@ -0,0 +1,55 @@
+import { Color } from "@/GlobalStyles";
+import React, { useState } from "react";
+import {
+    ActivityIndicator,
+    Image,
+    ImageProps,
+    StyleProp,
+    StyleSheet,
+    View,
+    ViewStyle,
+} from "react-native";
+
+interface OImageWithLoaderProps extends ImageProps {
+    containerStyle?: StyleProp<ViewStyle>;
+}
+
+export const OImageWithLoader = (props: OImageWithLoaderProps) => {
+    const [isLoading, setIsLoading] = useState(false);
+
+    return (
+        <View style={[styles.container, props.containerStyle]}>
+            <Image
+                {...props}
+                style={[styles.image, props.style]}
+                onLoadStart={() => setIsLoading(true)}
+                onLoadEnd={() => setIsLoading(false)}
+            />
+            {isLoading && (
+                <View style={styles.loaderContainer}>
+                    <ActivityIndicator size="large" color={Color.primary} />
+                </View>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: "relative",
+    },
+    image: {
+        width: "100%",
+        height: "100%",
+    },
+    loaderContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "rgba(255, 255, 255, 0.7)",
+    },
+});

mobile/screens/main/ProfileView.tsx

@@ -1,6 +1,7 @@
 import { Color, Subtitle } from "@/GlobalStyles";
 import { UserPublicDTO } from "@/api/gen/src";
 import { OBadgesOfUser } from "@/components/OBadge/OBadgesOfUser";
+import { OImageWithLoader } from "@/components/OImageWithLoader/OImageWithLoader";
 import { OPageContainer } from "@/components/OPageContainer/OPageContainer";
 import { OPageHeader } from "@/components/OPageHeader/OPageHeader";
 import { OPageHeaderEncounters } from "@/components/OPageHeader/OPageHeaderEncounters/OPageHeaderEncounters";
@@ -53,7 +54,10 @@ const ProfileView = ({
                 }}
                 style={styles.previewImageContainer}
             >
-                <Image source={{ uri: item }} style={styles.previewImage} />
+                <OImageWithLoader
+                    source={{ uri: item }}
+                    style={styles.previewImage}
+                />
             </TouchableOpacity>
         );
     };
@@ -109,7 +113,7 @@ const ProfileView = ({
                                     setFullScreenVisible(true);
                                 }}
                             >
-                                <Image
+                                <OImageWithLoader
                                     source={{ uri: item }}
                                     style={styles.carouselImage}
                                 />