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,12 +12,18 @@ 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){
+      
+     if (!ready && username===""){
+         tick.current = setInterval(() => {  
+           setTimer((timer) => timer + 1);
+         }, 1000);
+         
+         if(timer >= 10){
             fetch(backendUrl + '/dm', {
             method: 'POST',
             body: JSON.stringify({ token: token }),
@@ -32,8 +38,12 @@ const ChatPage = () => {
            }).catch((error) => {
              console.error('Error:', error);
            });
+           setTimer((timer) => 0);
+           clearInterval(tick.current);
          }
-   }, [token, ready, username]);
+     } 
+     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>