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;