Execute a function after iterating completely over all elements - reactjs

Question

I have a json object messages that I want to display and iterate over using the map function. This is loaded at the very beginning. There are 23 elements in it, but it takes a short moment until all elements are displayed. I would like to write a loading function, i.e. as soon as all messages have been iterated over, a function should be called.
I have tried this here, but this function is not executed.
Now my question, how can I execute the function loading, as soon as over all elements was iterated over?
Note: I have update the message Json and this send also works in real time, but only the initial loading takes too long and therefore I would like to show the user something. A loading bar should be displayed and as soon as the complete list has been iterated over, the list should be removed or no longer displayed and the user should receive the complete loaded list.
function MessageSide(props) {
const [loaded, setLoaded] = useState(false); // added
const loading = () => {
console.log("LOADED")
setLoaded(true) // added
}
return (
<div class="col flex-fill background--chat">
<div className="content__body">
// added
{loaded? false :
<div>
<Ellipsis color="#5869FF" style={{left:"50", right:"50", top:"50", bottom:"50",}}/>
</div>
} // added
<div className="item" style={loaded? {} : {display: 'none'}}>
{messages.map((message) => {
// onLoad={() =>test()} that didn't work
return (
<div>
<Message
message={message.body}
id={message.id}
timestamp={message.timestamp}
chatid={message.chatid}
onLoad={() =>loading()} // this is what I tried
/>
</div>
);
})}
</div>
<div ref={messagesEndRef}/>
</div>
</div>
);
}
export default MessageSide;

Answer 1

The loading is rather not to be determined in return, let alone inside a loop.
You should include code of <Message> to your question.
const [initialLoad, setInitialLoad] = useState(false)
useEffect(()=>{
if(message.length > 0) { setInitialLoad(true) }
},[message])
useEffect(()=>{ if(message.length > 0) {
/*stop showing loading screen */
} },[initialLoad])`
This way, variable initialLoad will be false at first render, but will be changed into true after load. However it will not change afterwards, causing the last useEffect hook to be executed only once