OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

why is my logic to conditionally rendering a loading screen not working?

  • Thread starter Thread starter Harsh Kumar
  • Start date Start date
H

Harsh Kumar

Guest
Code:
const [isLoading, setIsLoading] = useState(false);

//this is the whole method where I want to use it
const joinRoom = () => {
const roomKey = roomKeyInput.current.value;
if(roomKey == null)
  return
let req = {
  sessionId: sessionId,
  socketId: socket.id
}
setIsLoading(true)
axios.post(`${hostName}/join-room/${roomKey}`, req)
  .then((res)=>{
    if(res.data.success){
      setIsRoomAdmin(false)
      setRoomKey(res.data.roomKey)
      setConnectedToRoom(true);
      socket.emit('connect-to-room', {
        roomKey: roomKey
      })
    }
  }).catch(function (error) {
    console.log(error);
  });
setIsLoading(false)
}

 return (
<>
  {isLoading && <Loader />}
</>
)

It works if I manually set the initial value to true, but on updating state it's not working. I'm actually using this same logic in other component and this method is working fine there.

I know setting a state is asyncronous but, shouldn't this work may be with a little delay. I'm using Vite react btw. Sometimes I have to restart server to see the changes but I've tried that too.

<pre><code>const [isLoading, setIsLoading] = useState(false);

//this is the whole method where I want to use it
const joinRoom = () => {
const roomKey = roomKeyInput.current.value;
if(roomKey == null)
return
let req = {
sessionId: sessionId,
socketId: socket.id
}
setIsLoading(true)
axios.post(`${hostName}/join-room/${roomKey}`, req)
.then((res)=>{
if(res.data.success){
setIsRoomAdmin(false)
setRoomKey(res.data.roomKey)
setConnectedToRoom(true);
socket.emit('connect-to-room', {
roomKey: roomKey
})
}
}).catch(function (error) {
console.log(error);
});
setIsLoading(false)
}

return (
<>
{isLoading && <Loader />}
</>
)
</code></pre>
<p>It works if I manually set the initial value to true, but on updating state it's not working.
I'm actually using this same logic in other component and this method is working fine there.</p>
<p>I know setting a state is asyncronous but, shouldn't this work may be with a little delay. I'm using Vite react btw. Sometimes I have to restart server to see the changes but I've tried that too.</p>
 

Latest posts

Online statistics

Members online
0
Guests online
2
Total visitors
2
Ads by Eonads
Top