Wsrtjtyk

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.

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

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