로딩창 만들기

opeanai api에게 내 정보를 물어보면 답이 돌아오는데 시간이 조금 걸려 사용자가 지루할 수 있다.
이를 해결하기 위해 로딩창을 만들어보기로 했다.  


React Spinners (davidhu.io)

React Spinners

 
 우선 아래 코드로 설치해주고 위에 사이트에서 마음에 드는 로딩창을 가져오면 된다
npm i react-spinners --save
add react-spinners
 
-loading.js

npm i react-spinners --save

add react-spinners

 

 

mport React from 'react';

import {Oval} from "react-loader-spinner"; //수많은 스피너 중 저는 Oval 스피너 import하겠습니다

function Loading () {

   

    return ( //import 한 스피너는 컴포넌트 형태로 사용가능

        <Oval className="image" color='black' secondaryColor="black"/>

       

    ) ;

};

export default Loading;

 .Loading.css

.Loading{

    display: flex;

    align-items: center;

    justify-content: center;

    color : "black";

    height : 100px;

    width : 100px;

}

 
-채팅창 전체 코드

import React, { useState, useRef, useEffect } from 'react';

import axios from 'axios';

import Loading from './loading'; // 파일 경로 및 대소문자 확인

const ChatGPT = () => {

    const [inputValue, setInputValue] = useState('');

    const [chatHistory, setChatHistory] = useState([]);

    const [responseMessage, setResponseMessage] = useState('');

    const [isTyping, setIsTyping] = useState(false);

    const [isLoading, setIsLoading] = useState(false); // isLoading 상태를 정의합니다.

    const chatHistoryRef = useRef(null); // 채팅 히스토리 엘리먼트에 대한 참조를 생성합니다.

    const scrollToBottom = () => {

        if (chatHistoryRef.current) {

            chatHistoryRef.current.scrollTop = chatHistoryRef.current.scrollHeight;

        }

    };

    useEffect(() => {

        scrollToBottom(); // 컴포넌트가 마운트될 때마다 스크롤을 가장 아래로 이동합니다.

    }, [chatHistory]);

    const sendMessage = async () => {

        setIsLoading(true); // 메시지 전송 시작 시 로딩 상태를 true로 설정합니다.

        try {

            const response = await axios.post('http://127.0.0.1:5000/sendMessage', {

                user_input: inputValue

            });

            setResponseMessage(response.data.description);

            setChatHistory(prevChat => [...prevChat, { text: inputValue, sender: 'user' }]);

            setChatHistory(prevChat => [...prevChat, { text: response.data.description, sender: 'bot' }]);

            console.log('Responsemessage:', response.data.description);

        } catch (error) {

            console.error('Error sending message:', error);

        }

        setInputValue('');

        setIsTyping(false);

        setIsLoading(false); // 메시지 전송 완료 시 로딩 상태를 false로 설정합니다.

        scrollToBottom(); // 새로운 메시지가 추가될 때마다 스크롤을 가장 아래로 이동합니다.

    };

    const handleInputChange = (event) => {

        setInputValue(event.target.value);

        setIsTyping(true);

    };

    const handleKeyPress = (event) => {

        if (event.key === 'Enter') {

            sendMessage();

        }

    };

 

    return (

        <div className="chat-container">

            {isLoading && (

                <div className="loading-overlay">

                    <Loading />

                    <div className='ment'>AI에게 물어보는 중이랑께~</div>

                </div>

            )}

            <div className="chat-history" ref={chatHistoryRef}>

                {chatHistory.map((message, index) => (

                    <div key={index} className={`message ${message.sender}`}>

                        {message.text}

                    </div>

                ))}

                {(chatHistory.length === 0) && (

                    <div className="messagebot">서찬에 대해 궁금한 것을 입력하세요<br />(질문은 최대 10개까지 가능합니다)</div>

                )}

            </div>

            <div className="chat-input">

                <input

                    type="text"

                    value={inputValue}

                    onChange={handleInputChange}

                    onKeyPress={handleKeyPress}

                    placeholder="메시지를 입력하세요..."

                />

                <button onClick={sendMessage}>전송</button>

               

            </div>

        </div>

    );

};

export default ChatGPT;

 

-로딩창