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.

Nikita Chayka · Accepted Answer · 2022-12-08 17:59:18Z

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,
            })
         });

answered Dec 8, 2022 at 17:59

Nikita Chayka

2,14512 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DZR Over a year ago

thank you, kind Sir! For both recommendations. Its working

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related