Getting react-loading-spinner to work in my react component - Does not show on click/fetching

Question

I want to add react-loader-spinner to show when I await API to return the data.

I tried almost everything but can't seem to get it to work. It does not show the spinner on click while fetching the data. Any help is appreciated.

Here is the source code below:

import React from "react";
import { Component} from "react";
import { Container, Form, Button, Card, FormGroup, FormLabel, FormControl  } from 'react-bootstrap'
import { ThreeDots } from 'react-loader-spinner'


const { Configuration, OpenAIApi } = require('openai');

class AppGenerator extends Component {
    constructor() {
        super()
        this.state = {
            isLoading: false,
            heading: '',
            response: ''        
        }
    }

    onFormSubmit = async e => {
        // Start by preventing at default
        e.preventDefault()

        const formData = new FormData(e.target),
        formDataObj = Object.fromEntries(formData.entries())
        console.log(formDataObj.suggestion)

        // OPENAI CONFIGURATION

        const configuration = new Configuration({
        apiKey: 'somekey',
        });
        const openai = new OpenAIApi(configuration);

        openai.createCompletion({
            model: 'text-davinci-003', 
            prompt: `Write the blog about ${formDataObj.suggestion} and be very specific about it with a minimum of 1500 words`,
            temperature: 1,
            max_tokens: 2000,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty:0,
        })
        .then((response) => {
            this.setState({
                isLoading: true,
                heading: `Suggestion for: ${formDataObj.suggestion}`,
                response: `${response.data.choices[0].text}`,
            })
        });
    }



    render() {

        const {isLoading} = this.state;
        if (isLoading) {
            return <ThreeDots height="80" width="80" radius="9" color="green" ariaLabel="loading"/>
        }

       
        return(
            <div>
                <Container>
                    <br/>
                    <h2 style={{color: '#fff'}}>Blog Post Suggestion</h2>
                    <br/>
                    <Form onSubmit={this.onFormSubmit}>
                        <FormGroup className="mb-3" controlId="formBasicEmail">
                            <FormLabel style={{color: '#fff'}}>What would you us to write about?</FormLabel>
                            <FormControl
                                type = 'text'
                                name = 'suggestion'
                                placeholder= 'ie: How artificial intelligence will change the world'
                            />
                             <Form.Text className="text-muted">
                                Enter as much information as possible.
                            </Form.Text>
                        </FormGroup>
                        <Button id="button" variant="primary" size='lg' type="submit" className="button-submit">
                            Create Blog Post
                        </Button>
                    </Form>

                    <br/>
                    <br/>

                    <Card style={{border: 'none'}}>
                        <Card.Body style={{background: '#212529'}}>
                            <Card.Title style={{color: '#fff', background: '#212529'}}><h2>{this.state.heading}</h2></Card.Title>
                            <br/>
                            <Card.Text style={{color: '#fff', background: '#212529'}}><p>{this.state.response}</p></Card.Text>
                        </Card.Body>
                    </Card>
                </Container>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
            </div>
        )
    }
    
}

export default AppGenerator

Thank you for taking the time to look at the code and help out.

Answer 1

You need to set isLoading to true before you doing API request, not after. Also I would suggest setting then isLoading to false in finalize , instead of just then , because you could have an error from the API as a result, and that won't go to .then

        this.setState({
              isLoading: true,
        });        
        openai.createCompletion({
            model: 'text-davinci-003', 
            prompt: `Write the blog about ${formDataObj.suggestion} and be very specific about it with a minimum of 1500 words`,
            temperature: 1,
            max_tokens: 2000,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty:0,
        })
        .then((response) => {
            this.setState({
                heading: `Suggestion for: ${formDataObj.suggestion}`,
                response: `${response.data.choices[0].text}`,
            })
        })
        .finally(_ => {
            this.setState({
                isLoading: false,
            })
         });