React Load Spinner While Array of Images Load

I have an array of img src tags I'm dynamically setting when I pass the itemName as shown in and then rendering the full array. I want to show a Spinner until all the images are done loading however the current behavior is during a refresh or initial load, some layers load before the others taking some time to all fully load and no Spinner is showing.

I'd like to show the full array of images as once, not have some layers show and watch the loading process. I am not making any API calls, just finding the path of the images located in my project structure. Any help would be appreciated.

class BodyOption extends Component {
    constructor(props) {
        super(props);
    }

    render() {    

        let option = null; // initial state
        var wantedOption = this.props.itemName;
        var optionCategory = this.props.optionCategory;
        optionCategory = optionCategory.replace(/ /g, "");
    
        var fileName = optionCategory+"_"+wantedOption+".png";

        try {

            option =  
                <div key={optionCategory} className={classes.Layer}>
                   <img src {require(`../../../assets/images/${optionCategory}/${fileName}`).default} alt={wantedOption}/>   
                 </div>
         } catch (err) {
            option = null
         }  

         return option;
    }
};
export default BodyOption;

import Spinner from '../UI/Spinner/Spinner';
import ClassicBodyOption from './ClassicOptions/ClassicBodyOption';
const classes = require('./Classic.module.css');

class Classic extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pictureArray:[]
        }
    }
    componentDidMount() {
        var transformedClassicBodyOptions = Object.keys(this.props.classicBodyOptions)
        .map(igKey => {
            return Object.keys(this.props.classicBodyOptions[igKey] ).map(realKey => {   
                return [...Array((this.props.classicBodyOptions[igKey][realKey] ))].map( 
                    (itemName, i) =>  {
                        const keyName = realKey.replace(/ /g, "");
                        return <BodyOption 
                            key={keyName + i} 
                            optionCategory={realKey}
                            itemName={itemName}
                           />;
                    });       
            });
        })
        .reduce((prevVal, currVal) => { // this just flattens array
            return prevVal.concat(currVal); 
        }, [  ]);
        this.setState({pictureArray:transformedClassicBodyOptions});
    }
    
    render() { 
        if(this.state.pictureArray.length != 0){
            return (
                    <div className={classes.Classic}>
                        {this.state.pictureArray}
                    </div>
            );
        } else {
            return (
                <div className={classes.Classic}>
                    <Spinner/>
                </div>
            );
        } 
    }
      
}
export default Classic;

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW