add loading

src/Components/ChatTrans.js

-import { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
-  Button,
   Col,
   Container,
   Form,
   FormLabel,
-  Row,
   ListGroup,
+  Row
 } from "react-bootstrap";
 import io from "socket.io-client";
 import "../App.css";
-import React, { useEffect } from "react";
 
 const url = 'https://staging.strk-ai-support.ngrok.app/'
 // const url = "http://localhost:8000";
@@ -33,6 +31,8 @@ function ChatTrans() {
   const [supportMessages, setSupportMessages] = useState([]);
   const [room, setRoom] = useState("");
 
+  const [loading, setLoading] = useState(true);
+
   const generateToken = () => {
     return Math.random().toString(36).substr(2, 9);
   };
@@ -85,7 +85,9 @@ function ChatTrans() {
       setUserMessages(messages);
     } else {
       setSupportMessages(messages);
+      setLoading(false);
     }
+    
   });
 
   const sendMessage = (
@@ -202,6 +204,7 @@ function ChatTrans() {
 
         <Row>
           <Col>
+            {loading ? <FormLabel>Loading...</FormLabel> : null}
             <ListGroup variant="flush">
               {userMessages.map((message, index) => (
                 <ListGroup.Item key={index}>{message}</ListGroup.Item>
@@ -209,6 +212,7 @@ function ChatTrans() {
             </ListGroup>
           </Col>
           <Col>
+            {loading ? <FormLabel>Loading...</FormLabel> : null}
             <ListGroup variant="flush">
               {supportMessages.map((message, index) => (
                 <ListGroup.Item key={index}>{message}</ListGroup.Item>