How come React.js Conditional rendering doesn't work iOS 9 and below?

I have multiple components that follow this rendering structure if I am fetching data from a database. Basically, on componentWillMount() I fetch data from my API, while this is happening a spinner gets displayed on the screen, which is the else if statement. Once data is loaded the if statement is supposed to run which works on my desktop, and iPhone 5 & iPad mini on iOS 11. However, if I test my website on my iPhone 6, and iPad which are on iOS 9.3.3. The website gets stuck on the second else if statement. Basically, the spinner just stays, and never switches to show the data when it loads. Is this an iOS 9 issue or is it based on how I wrote my rendering function?

Sample code that doesn't work

Code that does work

renderPage(){
    if(this.state.productDataLoaded && this.state.productData){
        return(
            <div className="single-brand">
                <h1 className="ui header">Shopping Bag</h1>
                <div className="page-container ui container">
                    {this.renderClothing()}
                </div>
            </div>
        )
    }else if(this.state.productDataLoaded === false ){
        return(
            <div className="ui active inverted dimmer">
                <div className="ui indeterminate text loader">Preparing Files</div>
            </div>
        )
    }else{
        return(
            // returns 404
        )
    }
}
render(){
    return(
        <section id="cart">
            {this.renderPage()}
        </section>
    )
}