show loading bar when parent component pass data to and render child component. React.JS

Question

I am loading a child component on parent component in React.js. With a click on the button, data will be pass to child component through props, and child component will map through that data and render on screen. I am getting data from localstorage and processing its data structure to child component. But, the issue is when I click on the button and data is being passed and rendered, the button is shown and after the child component is rendered that shows up. I need the loading spinner when I click on the button and it disappears and shows the actual component. I have tried methods like loading: false in the state but to no avail.

Thanks for your help

import ShowPatientAppointments from './ShowPatientAppointments.component';

class PatientAppointmnent extends Component {
    state = {
        doctorSlots: null,
        timingSlot: null,
        bookDay: null,
        bookTime: null,
        hasTiming: false,
    }

    getSlots = () => {
        let slot = [];
        let time = [];
        
        for (let i=0; i< localStorage.length; i++) {
            let key = localStorage.key(i);
            let value = JSON.parse(localStorage[key]);
            slot.push(key);
            time.push(value);
            
            this.setState({doctorSlots: slot, timingSlot: time});
        }
        console.log(this.state.doctorSlots, this.state.timingSlot);
    }


    render() {
        const { doctorSlots, timingSlot, hasTiming } = this.state;
        return(
            <div>
               
                <button onClick={this.getSlots} className='button'>Show me dates</button>

                {doctorSlots === null ? <p></p> : <PatientSelectDay props={doctorSlots} timing={timingSlot} getTimings={this.getTiming} />}
            </div>
        )
    }
}

export default PatientAppointmnent;


class PatientSelectDay extends Component {
state = {  
      options: [...this.props.props].map(obj => {
        return {value: `${obj}`, label: `${obj}`}
      }),
      timingOptions: [...this.props.timing],
      open_id: [],
      part_id: '',
      doctorDay: 'day',
      doctorTiming: 'timing',
  }

  changeSingleHandler = e => {
    this.setState({ part_id: e ? e.value : '' });
  };

  changeHandler = e => {
    let add = this.state.open_id;
    add.push(e.map(x => x.value));
    this.setState({ open_id: e ? add : [] });
  };

  saveState = (option) => {
...save selected options
  }  

  render() {
    const {options, timingOptions} = this.state;
    return (
      <div>
            <div className='carousel'>
          {options.map((option, index) => {
                const timing = timingOptions[index].map(obj => {
                  return {value: `${obj}`, label: `${obj}`}});
                return(
                <div key={index}>
                  <Select
                    name="open_id"
                    value={option}
                    onChange={this.changeSingleHandler}
                    options={option}
                    className='select'
                  /> 
                  <Select
                    name="open_id"
                    value={this.state.open_id}
                    onChange={this.changeHandler}
                    options={timing}
                    className='select'
                  /> 
            <button onClick={() => this.saveState(option)} className='button-left'>Select Days</button>
            </div>
            )
  })}
            </div>
          </div>
          )
    }
  }
export default PatientSelectDay;

Answer 1

You need to update your code adding a loading state variable.

class PatientAppointmnent extends Component {
    state = {
        doctorSlots: null,
        timingSlot: null,
        bookDay: null,
        bookTime: null,
        hasTiming: false,
        loading: false
    }

    getSlots = () => {
        let slot = [];
        let time = [];
        
        this.setState({
          loading: true
        })
        
        for (let i=0; i< localStorage.length; i++) {
            let key = localStorage.key(i);
            let value = JSON.parse(localStorage[key]);
            slot.push(key);
            time.push(value);
            
            this.setState({doctorSlots: slot, timingSlot: time, loading: false});
        }
        console.log(this.state.doctorSlots, this.state.timingSlot);
    }
    
    renderButton = () => {
            const { doctorSlots, timingSlot, loading } = this.state;
        if(doctorSlots === null && timingSlot === null) {
        return <div>
          {loading ? <p>Loading...</p> : <button onClick={this.getSlots} className='button'>Show me dates</button>}
        </div>
      }
      return null;
    }


    render() {
        const { doctorSlots, timingSlot, hasTiming, loading } = this.state;
        return(
            <div>
                {this.renderButton()}
                {doctorSlots === null ? <p></p> : <PatientSelectDay props={doctorSlots} timing={timingSlot} getTimings={this.getTiming} />}
            </div>
        )
    }
}

export default PatientAppointmnent;


class PatientSelectDay extends Component {
state = {  
      options: [...this.props.props].map(obj => {
        return {value: `${obj}`, label: `${obj}`}
      }),
      timingOptions: [...this.props.timing],
      open_id: [],
      part_id: '',
      doctorDay: 'day',
      doctorTiming: 'timing',
  }

  changeSingleHandler = e => {
    this.setState({ part_id: e ? e.value : '' });
  };

  changeHandler = e => {
    let add = this.state.open_id;
    add.push(e.map(x => x.value));
    this.setState({ open_id: e ? add : [] });
  };

  saveState = (option) => {
...save selected options
  }  

  render() {
    const {options, timingOptions} = this.state;
    return (
      <div>
            <div className='carousel'>
          {options.map((option, index) => {
                const timing = timingOptions[index].map(obj => {
                  return {value: `${obj}`, label: `${obj}`}});
                return(
                <div key={index}>
                  <Select
                    name="open_id"
                    value={option}
                    onChange={this.changeSingleHandler}
                    options={option}
                    className='select'
                  /> 
                  <Select
                    name="open_id"
                    value={this.state.open_id}
                    onChange={this.changeHandler}
                    options={timing}
                    className='select'
                  /> 
            <button onClick={() => this.saveState(option)} className='button-left'>Select Days</button>
            </div>
            )
  })}
            </div>
          </div>
          )
    }
  }
export default PatientSelectDay;