Add custom image loader and start job status.

components/job-documents/image-loader.jsx

@@ -0,0 +1,43 @@
+import { useMemo, useState } from "react";
+import { Image } from "react-native";
+import { ActivityIndicator } from "react-native-paper";
+
+const ImageLoader = ({ style, source, ...props }) => {
+  const [loading, setLoading] = useState(true);
+
+  const handleLoadStart = () => {
+    setLoading(true);
+  };
+
+  const handleLoadEnd = () => {
+    setLoading(false);
+  };
+
+  const handleLoad = () => {
+    setLoading(false);
+  };
+
+  const memorizedImage = useMemo(
+    () => (
+      <Image
+        {...props}
+        style={style}
+        source={source}
+        //onLoadStart={handleLoadStart}
+        onLoadEnd={handleLoadEnd}
+        onLoad={handleLoad}
+      />
+    ),
+    [source]
+  );
+  if (loading)
+    return (
+      <>
+        <ActivityIndicator style={{ ...style, position: "absolute" }} />
+        {memorizedImage}
+      </>
+    );
+  return memorizedImage;
+};
+
+export default ImageLoader;

components/job-documents/job-documents.jsx

@@ -2,13 +2,7 @@ import cleanAxios from "@/util/CleanAxios";
 import axios from "axios";
 import { useGlobalSearchParams } from "expo-router";
 import React, { useCallback, useEffect, useState } from "react";
-import {
-  FlatList,
-  Image,
-  RefreshControl,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { FlatList, RefreshControl, TouchableOpacity, View } from "react-native";
 import ImageView from "react-native-image-viewing";
 import { ActivityIndicator, Text } from "react-native-paper";
 import { connect } from "react-redux";
@@ -17,6 +11,7 @@ import env from "../../env";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DetermineFileType } from "../../util/document-upload.utility";
 import ErrorDisplay from "../error/error-display";
+import ImageLoader from "./image-loader";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -142,7 +137,7 @@ export function JobDocumentsComponent({ bodyshop }) {
               setPreviewVisible(true);
             }}
           >
-            <Image
+            <ImageLoader
               style={{ flex: 1 }}
               resizeMode="cover"
               source={{