How to close loadingMore status when no more messages？

I have refered to the code in https://chatscope.io/storybook/react/?path=/docs/components-messagelist--loading-more-state and changed the fake fetch part, receiving loaded messages in batches from my own server whenever I scroll the bar to the top. But I have difficulty stopping loading more messages when there are no more messages (aka. `this.state.receivedloadMsgList === []` ), and it failed to work as below.


The loadingMore circle constantly appears and it is just stuck here. Meanwhile, my last batch of loaded messages doesn't show either ( which is ` [1, 2, 3, 4] ` ).

Does anyone know how to stop executing `onYReachStart` function when there are no more loaded messages? Also, how can I close `loadingMore` status? THANKS!

Here is part of my code:

```
onYReachStart(e) {
if (this.state.loadingMore == true) {
return;
}

if (this.state.receivedloadMsgList != []) {
this.setState({loadingMore: true});
} else {
this.setState({loadingMore: false});return;
}

setTimeout(() => {
let messages = [];

if (this.state.receivedloadMsgList !== []) {

let list = this.state.receivedloadMsgList; // loaded messages from the server

list.reverse().forEach((val, i) => {
let position;

if (val.mode1 == 'sysmessage') {
messages.push()
}else if (val.sender == this.state.ownner.id) { position = 'outgoing' }
else { position = 'incoming' }

if (val.mode1 == 'text') {
messages.push(



)
this.setState({counter: this.state.counter+1});
}
if (val.mode1 == 'photo') {
messages.push(


...


)
this.setState({counter: this.state.counter+1})
}
if (val.mode1 == 'file') {
messages.push(


...


)
}
})
this.setState({loadedMsgList: messages.reverse().concat(this.state.loadedMsgList)});
this.setState({loadingMore: false});
}
}, 1500);
```