new changes

src/screens/home/skin/SkinUploader.js

-import React, { useState } from 'react';
-import { View, StyleSheet, Image, TouchableOpacity, PermissionsAndroid, Text, ScrollView } from 'react-native';
-import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
-import { COLORS, IMGS, ROUTES } from '../../../constants';
+import React, {useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  PermissionsAndroid,
+  Text,
+  ScrollView,
+  ActivityIndicator,
+} from 'react-native';
+import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
+import {COLORS, IMGS, ROUTES} from '../../../constants';
 import Button from '../../../components/Button';
 import axios from 'axios'; // Import Axios
 
-const Camera = ({ navigation }) => {
+const Camera = ({navigation}) => {
   const [cameraPhoto, setCameraPhoto] = useState();
   const [galleryPhoto, setGalleryPhoto] = useState();
-    const REACT_APP_API_URL='https://us-central1-skin-condition-detection.cloudfunctions.net/predict';
+  const REACT_APP_API_URL =
+    'https://us-central1-skin-condition-detection.cloudfunctions.net/predict';
   const [prediction, setPrediction] = useState(null);
-
+  const [loading, setLoading] = useState(false);
   const [photo, setPhoto] = useState(null);
 
-    
-
   let options = {
     saveToPhotos: true,
     mediaType: 'photo',
@@ -41,7 +49,7 @@ const Camera = ({ navigation }) => {
     }
   };
 
-    const submitPhoto = async (photoUri) => {
+  const submitPhoto = async photoUri => {
     try {
       const formData = new FormData();
       formData.append('file', {
@@ -66,7 +74,6 @@ const Camera = ({ navigation }) => {
     }
   };
 
-
   const handleContinue = () => {
     let route; // Variable to store the route name
 
@@ -98,13 +105,11 @@ const Camera = ({ navigation }) => {
     } else {
       // Handle the scenario where prediction or prediction.class is undefined
       // Maybe navigate to an error page or show an alert
-            console.log("No valid prediction available.");
+      console.log('No valid prediction available.');
       // navigation.navigate(ROUTES.DEFAULT_ROUTE); // Example fallback
     }
   };
 
- 
-
   return (
     <View style={styles.container}>
       <View style={styles.topContainer}>
@@ -113,31 +118,49 @@ const Camera = ({ navigation }) => {
         <Image style={styles.babyImage} source={IMGS.sk_1} />
 
         <View style={styles.buttonContainer}>
-                <TouchableOpacity onPress={openGallery} style={[styles.button, styles.buttonLeft]}>
+          <TouchableOpacity
+            onPress={openGallery}
+            style={[styles.button, styles.buttonLeft]}>
             <Image source={IMGS.sk_3} style={styles.buttonImage} />
           </TouchableOpacity>
-                <TouchableOpacity onPress={openCamera} style={[styles.button, styles.buttonRight]}>
+          <TouchableOpacity
+            onPress={openCamera}
+            style={[styles.button, styles.buttonRight]}>
             <Image source={IMGS.sk_2} style={styles.buttonImage} />
           </TouchableOpacity>
         </View>
         {photo && (
           <View style={styles.photoContainer}>
-                        <Image source={{ uri: photo }} style={styles.photo} />
+            <Image source={{uri: photo}} style={styles.photo} />
           </View>
         )}
       </View>
-            <Text style={styles.descriptionText}>'Use phone camera or select a photo from the gallery that clearly shows your skin.'</Text>
+      <Text style={styles.descriptionText}>
+        'Use phone camera or select a photo from the gallery that clearly shows
+        your skin.'
+      </Text>
       <View style={styles.bottomContainer}>
+        {loading ? (
+          <View style={styles.loaderContainer}>
+            <ActivityIndicator size="large" color={COLORS.primary} />
+          </View>
+        ) : (
+          <>
             {!prediction && (
               <>
-             <Text style={styles.resultsHeading}>Results will appear below</Text>
+                <Text style={styles.resultsHeading}>
+                  Results will appear below
+                </Text>
               </>
-            
             )}
-            {prediction && (
+            {!loading && prediction && (
               <View style={styles.predictionContainer}>
-                <Text style={styles.predictionText}>Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}</Text>
-                 <Text style={styles.predictionText}>How sure are we | නිරවද්යතාව: {prediction.confidence}</Text>
+                <Text style={styles.predictionText}>
+                  Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}
+                </Text>
+                <Text style={styles.predictionText}>
+                  How sure are we | නිරවද්යතාව: {prediction.confidence}
+                </Text>
               </View>
             )}
             <Button
@@ -145,6 +168,8 @@ const Camera = ({ navigation }) => {
               style={styles.nextButton}
               onPress={handleContinue}
             />
+          </>
+        )}
       </View>
     </View>
   );
@@ -170,7 +195,6 @@ const styles = StyleSheet.create({
     // This creates the curve effect for the background
   },
 
-
   buttonContainer: {
     flexDirection: 'row',
     marginTop: -26,
@@ -225,18 +249,17 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginHorizontal: 10,
     marginBottom: -10,
-            marginTop:-40
+    marginTop: -40,
   },
   bottomContainer: {
     flex: 2,
     justifyContent: 'flex-end',
     marginBottom: 2,
-            marginTop:20,
+    marginTop: 20,
     alignItems: 'center',
     backgroundColor: COLORS.blue,
     borderTopRightRadius: 75,
     borderTopLeftRadius: 75,
-           
   },
   nextButton: {
     width: '90%',
@@ -245,13 +268,12 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.white,
     borderRadius: 20,
     alignSelf: 'center',
-            
   },
 
   photoContainer: {
     elevation: 4, // Android shadow
     shadowColor: '#000', // iOS shadow
-            shadowOffset: { width: 0, height: 2 }, // iOS shadow
+    shadowOffset: {width: 0, height: 2}, // iOS shadow
     shadowOpacity: 0.1, // iOS shadow
     shadowRadius: 2, // iOS shadow
     borderRadius: 10,
@@ -276,11 +298,11 @@ const styles = StyleSheet.create({
     // Add shadows if you like for better visual separation
     elevation: 4, // Android shadow
     shadowColor: '#000', // iOS shadow
-            shadowOffset: { width: 0, height: 2 }, // iOS shadow
+    shadowOffset: {width: 0, height: 2}, // iOS shadow
     shadowOpacity: 0.1, // iOS shadow
     shadowRadius: 2, // iOS shadow
-            bottom:75,
-            top:-10
+    bottom: 75,
+    top: -10,
   },
   resultsHeading: {
     fontSize: 16,
@@ -289,18 +311,20 @@ const styles = StyleSheet.create({
     padding: 10,
     textAlign: 'center',
     marginBottom: 90,
-            marginLeft:0
+    marginLeft: 0,
   },
 
-
   resultImage: {
     width: 100, // Set your desired width
     height: 100, // Set your desired height
     alignSelf: 'center',
     marginVertical: 20, // Adjust margin as needed
   },
-    
-    });
+  loaderContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
 
 export default Camera;
-