Adding a spinner from React Bootstrap

Question

I want to add a spinner to my modal that I am currently on.

    <Modal show={modal.show} onHide={onHideModal}>
      <form onSubmit={onImport}>
        <Modal.Header closeButton>
          <Modal.Title>View Details</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form.Group controlId="csvFile" className="mb-3">
            <Form.Label>Import CSV</Form.Label>
            <Form.Control type="file" accept='.csv, .xls, .xlsx' required className="primary mb-3" name="" onChange={onChangeImportFile} ref={inputFileRef} />
            <Button variant="primary" className="me-2" type="submit" disabled={saving===true ? false : true}>Upload</Button>
          </Form.Group>
          <Form.Group className="mb-2">
            <Form.Label>Message</Form.Label>
            <Form.Control as="textarea" readOnly value={fileError} rows={5} />
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={clearModal}>
                            Clear
                        </Button>
          <Button variant="secondary" onClick={onHideModal} className="me-auto">
                            Close
                        </Button>
        </Modal.Footer>
      </form>
    </Modal>

I want to click submit and it will show the spinner if the data is big. As of right now it looks like it broke but after a while all the data gets sent through.

I tried adding this inside but I am not really sure how to set it up to show the loading when I click the submit button.

<Spinner animation="border" role="status" variant="primary">
  <span className="visually-hidden">Loading...</span>
</Spinner>

Answer 1

Try using useState variable to change the occurence of spinner

Like, when u click on the submit btn the spinner should show up.