async/await for fetching data with spinner - reactjs

Question

Goal
To have a spinner running till data loads.
What I did
I followed this article
I also tried regular promise and then but no success.
What happens
the console.log is displaying "boom" right off the bat, so not waiting for data fetching. No errors.
EventPage.js
constructor (props) {
super(props);
this.state = {
panelView: true,
loading: true
}
}
async componentDidMount () {
try {
await this.props.fetchEvents();
this.setState({loading: false});
console.log("BOOM")
} catch {
}
}
render() {
const {loading} = this.state;
const {panelView} = this.state;
if (loading) {
return <Loader />
}
return (
(Actual page)
)
}
eventActionCreator fetchEvents
export const fetchEvents = () => {
return async dispatch => {
try {
const response = await axios.get('http://localhost:3090/events');
dispatch(setEvent(response.data));
return response.data;
} catch (e) {
return e;
}
}
}
The console is only to show code is waiting for fetch to execute, it doesn't.

Answer 1

Try this approach
state = {
products: [],
loading: true,
}
async componentDidMount() {
// try catch just to make sure we had no errors
try {
const res = await fetch('http://api');
// wait for json to be ready
const data = await res.json();
this.setState({
loading: false,
data,
});
// console.log(product.data.attributes)
} catch (e) {
console.log(e);
}
}
render() {
const { data, loading } = this.state;
return (
<Container>
<Contents>
{loading ? 'loading..' : <Products data={data} />}
</Contents>
</Container>
);
}

Answer 2

I figured out the issue. The problem was that I returned data from action creator and not a promise based action.
so, instead of
const response = await axios.get('http://localhost:3090/events');
dispatch(setEvent(response.data));
return response.data;
it should have been
return axios.get('http://localhost:3090/events')
.then((response) => {
dispatch(setEvent(response.data));
});
Issue that helped me resolve it

Answer 3

Seems you have it backward... You're initializing your state to true and then setting it to false in cdm... Then you are checking if loading is true if so render the Loader... Of course, it's not true, you set it to false...
Change to this:
constructor (props) {
super(props);
this.state = {
panelView: true,
loading: false <- here
}
}
async componentDidMount () {
this.setState({loading: true}); <- here
try {
await this.props.fetchEvents();
this.setState({loading: false}); <- and here...
console.log("BOOM")
} catch {
}
}
render() {
const {loading} = this.state;
const {panelView} = this.state;
if (loading) {
return <Loader />
}
return (
(Actual page)
)
}
Here is a live Demo: https://codesandbox.io/s/r0w381qw3p