how to fix preact component not re render on unistore action with multiple setState? - preact

Question

I tried to change isLoading to true before we start fetching data and change it again to false when finished.
The state both is change, but unfortunately component not re-render at first setState. Component doing render again just at last setState
I also tried doing setState({ isLoading: true }) in separate action and call it inside getJobs but result still same.
actions.js
import Api from '../api';
const actions = store => ({
async getJobs() {
store.setState({ isLoading: true });
// store is changed but component is not re-render
const { data } = await Api.get(`/jobs`);
store.setState({ jobs: data, isLoading: false });
// store is changed and component do re-render
}
});
export default actions;
jobs.js
import { h, Component } from 'preact';
import { connect } from 'unistore/preact';
import actions from '../actions';
import Jobs from './Job';
class JobList extends Component {
componentDidMount() {
this.props.getJobs();
}
renderJobs() {
return this.props.jobs.map(job => <Jobs key={job.id} {...job} />);
}
render() {
if (this.props.isLoading) {
return <p>loading...</p>;
}
return (
<div style={{ flex: 1 }} className="container py-3">
<div className="row">{this.renderJobs()}</div>
</div>
);
}
}
export default connect(['isLoading', 'jobs'], actions)(JobList);
I expect when we change isLoading to true, they will show loading text first but its not.
unistore version: 3.5.0
preact version: 10.0.1