Loading Animation Not Rendering in React

Viewed 45

I'm working on a react-js project with the Spotify API which will display user-specific stats after logging in.

The current process is user goes to home page, clicks login, spotify authorizes them, I render the loggedIn screen in which a lot of API calls and calculations are done in componentDidMount().

I have a state attribute of itemsLoaded which is false by default but once the calculations are done I set it as true in my componentDidMount(). In my render() function I want to render a loading page when itemsLoaded is false and this used to work perfectly but stopped work about a day ago when I made some edits to my helper methods that come before it which resulted in more API calls being made. I'm not sure why the loader isn't working though and put a console.log there which is printing while the page is loading but the loading component I'm importing is no longer showing. Any advice or insight into the issue will be greatly appreciated, thank you!

  • this is not exact code but i put in all the parts that are relevant

constructor(props) {
        super(props);
        history.push('/');
        this.state = {
        userData: {},
        recievedError: false,
       itemsLoaded: false
        };
    }

async componentDidMount(){
  try{
  //bunch of helper methods and calculations and API calls
    this.setState({itemsLoaded:true},this.props.onChangeParentStyle(true,true,1));

  }
  catch(e){
  //redirect to home page
  }
}


render() {
        const dataLoaded = this.state.itemsLoaded;
        if (this.state.recievedError) {
            console.log(this.state.errorMsg);
            alert('Error: Spotify is having an issue sending us information about your music selection.')
            return(<App></App>);
        }
        else if (!dataLoaded) {
            console.log('loading :/')
            return  (<Loading></Loading>)
        } else {
            return(
                <div id="pagepiling">
                    { this.intro() }
                    { this.thankYou() } 
                </div>
            );
        }

0 Answers
Related