diff --git a/package-lock.json b/package-lock.json index 76fe290..f6f3c95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16489,9 +16489,9 @@ } }, "node_modules/react-native-vector-icons": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.1.0.tgz", - "integrity": "sha512-fdQjCHIdoXmRoTZ5gvN1FmT4sGLQ2wmQiNZHKJQUYnE2tkIwjGnxNch+6Nd4lHAACvMWO7LOzBNot2u/zlOmkw==", + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz", + "integrity": "sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==", "peer": true, "dependencies": { "prop-types": "^15.7.2", diff --git a/src/components/formComponents/FormImagePickerComponent.tsx b/src/components/formComponents/FormImagePickerComponent.tsx index 1227d7d..b0622ad 100644 --- a/src/components/formComponents/FormImagePickerComponent.tsx +++ b/src/components/formComponents/FormImagePickerComponent.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { View, Text, ImageBackground, ScrollView } from 'react-native' +import { View, Text, ImageBackground, ScrollView, ActivityIndicator } from 'react-native' import { Icon } from 'react-native-elements' import { useTranslation } from 'react-i18next' import { RootState, DispatchType, setMessageState } from '../../stores' @@ -24,6 +24,7 @@ type Props = { const ImagePickerComponent = (props: Props) => { const { register, setValue, setError, clearErrors, formState } = useFormContext() const [images, setImages] = useState>>(Array.isArray(props.defaultValue) ? props.defaultValue : []) + const [loading, setLoading] = useState(false) const { t } = useTranslation() const credentials = useSelector((state: RootState) => state.credentials) @@ -37,6 +38,8 @@ const ImagePickerComponent = (props: Props) => { const attachImage = async (useCamera: boolean) => { try { + setLoading(true) + let permissionResult: ImagePicker.CameraPermissionResponse | ImagePicker.MediaLibraryPermissionResponse if (useCamera) { @@ -83,6 +86,8 @@ const ImagePickerComponent = (props: Props) => { setTimeout(() => { clearErrors(props.objectTitle) }, 5000) + } finally { + setLoading(false) } } @@ -193,18 +198,22 @@ const ImagePickerComponent = (props: Props) => { {renderImages()} - - - - + { loading ? + + : + + + + + } diff --git a/src/components/formComponents/FormImagePickerKeywordComponent.tsx b/src/components/formComponents/FormImagePickerKeywordComponent.tsx index b3c96b3..37bb51c 100644 --- a/src/components/formComponents/FormImagePickerKeywordComponent.tsx +++ b/src/components/formComponents/FormImagePickerKeywordComponent.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { View, Text, ImageBackground, ScrollView } from 'react-native' +import { View, Text, ImageBackground, ScrollView, ActivityIndicator } from 'react-native' import { Icon } from 'react-native-elements' import RadioForm from 'react-native-simple-radio-button' import { useTranslation } from 'react-i18next' @@ -32,6 +32,7 @@ type Props = { const ImagePickerKeywordComponent = (props: Props) => { const { register, setValue, setError, clearErrors, formState } = useFormContext() const [images, setImages] = useState>>(Array.isArray(props.defaultValue) ? props.defaultValue : []) + const [loading, setLoading] = useState(false) const { t } = useTranslation() const keywords: Record = props.params const localized: string[] = props.params[props.lang] @@ -54,6 +55,8 @@ const ImagePickerKeywordComponent = (props: Props) => { const attachImage = async (useCamera: boolean) => { try { + setLoading(true) + let permissionResult: ImagePicker.CameraPermissionResponse | ImagePicker.MediaLibraryPermissionResponse if (useCamera) { @@ -102,6 +105,8 @@ const ImagePickerKeywordComponent = (props: Props) => { setTimeout(() => { clearErrors(props.objectTitle) }, 5000) + } finally { + setLoading(false) } } @@ -249,18 +254,22 @@ const ImagePickerKeywordComponent = (props: Props) => { {renderImages()} - - - - + {loading ? + + : + + + + + }