fix

src/ChatPage.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useSearchParams, useParams } from "react-router-dom";
 import "./style.css";
 import ChatBox from "./ChatBox.js";
@@ -12,28 +12,38 @@ const ChatPage = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const token = searchParams.get("gcube-token") || '';
   const [messages, setMessages] = useState([]);
-  
+  const tick = useRef() 
   const [username, setUsername] = useState("");
-  
+  const [timer, setTimer] = useState(0);
 
   useEffect(() => {
-    if (!(token === "") && !ready){
-        fetch(backendUrl + '/dm', {
+      
+     if (!ready && username===""){
+         tick.current = setInterval(() => {  
+           setTimer((timer) => timer + 1);
+         }, 1000);
+         
+         if(timer >= 10){
+            fetch(backendUrl + '/dm', {
             method: 'POST',
             body: JSON.stringify({ token: token }),
             mode: 'cors',
             headers: {
            'Content-Type': 'application/json'
            },
-      }).then(r => r.json()).then(r => {
-      let msg2 = { name: "Janet", message: r.answer};
-      setUsername(r.assignedname);
-      setReady(true);
-      }).catch((error) => {
-        console.error('Error:', error);
-      });
-    }
-   }, [token, ready, username]);
+           }).then(r => r.json()).then(r => {
+           let msg2 = { name: "Janet", message: r.answer};
+           setUsername(r.assignedname);
+           setReady(true);
+           }).catch((error) => {
+             console.error('Error:', error);
+           });
+           setTimer((timer) => 0);
+           clearInterval(tick.current);
+         }
+     } 
+     return () => clearInterval(tick.current);
+   }, [ready, username, timer]);
  
   function updateNeedForm(value) {
     setNeedForm(value);
@@ -43,6 +53,7 @@ const ChatPage = () => {
   }
   return (
     <div>
+  {!ready &&  <p>Loading...</p>}
   {ready && <ChatBox props={{ updateNeedForm, messages, updateMessages,  token}} /> }
   {ready && needForm && <FeedbackForm props={{ updateNeedForm, messages }} /> }
     </div>