Así que estoy construyendo este proyecto usando ChakraUI y ReactJS. Entonces, en este componente UploadImage, lo que quiero hacer es, cuando eliges un archivo y luego presionas el botón Cargar, el control giratorio se cargará mientras se recuperan los datos. Una vez que termine de obtener los datos, la carga será falsa y generará el componente. Pero actualmente está renderizando el componente inicialmente y después de enviar el archivo, renderiza el componente DisplayImage. Entonces, ¿cómo implementar correctamente el componente giratorio?

Mi código actual es el siguiente:

 function UploadImage() { const [selectedFile, setSelectedFile] = useState(null); const [error, setError] = useState(null); const [inputImage, setInputImage] = useState(null); const [outputImage, setOutputImage] = useState(null); const [isSubmit, setIsubmit] = useState(false); const [isLoading, setIsloading] = useState(true); const fileUploadHandler = () => { const fd = new FormData(); fd.append("file", selectedFile, selectedFile.name); axios .post(`/api/predict`, fd) .then((res) => { setIsubmit(true); setInputImage(res.data.image); setOutputImage(res.data.mask); selectedFile(null); setError(null); setIsloading(false); }) .catch((error) => { console.log(error); setSelectedFile(null); setError(error.data); }); }; const fileData = () => { if (selectedFile) { if ( selectedFile.type === "image/jpeg" || selectedFile.type === "image/png" ) { return ( <div> {error && <div>file too large!!</div>} <Button colorScheme='teal' size='sm' onClick={() => fileUploadHandler()} > Upload! </Button> </div> ); } else { return ( <div> <h4>Please choose an image to upload</h4> </div> ); } } else { return ( <div> <h4>Choose Photos</h4> </div> ); } }; return ( <div> <input type='file' onChange={(e) => setSelectedFile(e.target.files[0])} /> {fileData()} {isSubmit && isLoading === false ? ( <DisplayImage inputImage={inputImage} outputImage={outputImage} /> ) : ( <Spinner /> )} </div> ); } export default UploadImage;