I have this render

```
        render() {
        let rows = []

        if (this.state.loaded) {
         //this.props.totalWeeks is 5000
          for (let i = 1; i <= this.props.totalWeeks; i++) {
            rows.push(<CalendarFields key={i} weekId={i} weeksToRegisterDate={this.props.weeksToRegisterDate} currentWeek={this.props.currentWeek} description={this.getDescription(i)} rating={this.getRating(i)} />)
          }
          return <div className="fieldsContainer ">{rows}</div>
        } else {
          return <p>fetching data...</p>
        }

      }

```

And the amount of time that it takes to be displayed in the app is enormous. Around 5-6 seconds, so the screen is empty while it happens, I can add a load screen while the dom is rendered I guess. But cant I speed it somehow?

Is there any way to speed it? Its basically a composition of small cubes 20px height, 20px width, with custom props being passed for each one

**EDIT**: It has been basically solved using a production build

**EDIT2**: No it hasnt, it was an illusion

**EDIT3**: whole original code

```
import React from 'react'
import CalendarFields from './CalendarFields'
import { getUserId } from '../services/userInfo.js'
import API from '../services/axiosObject.js';
import constants from '../constants.js'
import { CircularProgress } from '@material-ui/core';
import './CalendarGrid.css'

class CalendarGrid extends React.Component {

  constructor() {
    super()

    this.state = {
      fieldsInfo: [],
      loaded: false
    }

  }

  componentDidMount() {

    const userId = getUserId();

    API.get(constants.urlBackend + '/getUserFieldsInfo/' + userId).then(response => {
      this.setState({
        fieldsInfo: response.data,
        loaded: true
      }, () => {
        console.log(this.state.fieldsInfo)
      })

    })
  }

  getDescription(id) {
    var newArray = this.state.fieldsInfo.filter(function (el) {
      return el.week_number == id
    })
    return newArray[0].text;
  }

  getRating(id) {
    var newArray = this.state.fieldsInfo.filter(function (el) {
      return el.week_number == id
    })
    return newArray[0].rating;
  }

  render() {

    let rows = []

    if (this.state.loaded) {
      for (let i = 1; i <= this.props.totalWeeks; i++) {
        rows.push(<CalendarFields key={i} weekId={i} weeksToRegisterDate={this.props.weeksToRegisterDate} currentWeek={this.props.currentWeek} description={this.getDescription(i)} rating={this.getRating(i)} />)
      }
      return <div className="fieldsContainer ">{rows}</div>
    } else {
      return <div className="gridLoadingContainer"><CircularProgress color="primary" iconStyle={"width: 150, height:150"}/></div>
    }

  }
}

export default CalendarGrid;

```

This is my try to implement the component

```
    import React from 'react'
import CalendarFields from './CalendarFields'
import { getUserId } from '../services/userInfo.js'
import API from '../services/axiosObject.js';
import constants from '../constants.js'
import { CircularProgress } from '@material-ui/core';
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import './CalendarGrid.css'

class CalendarGrid extends React.Component {

  constructor() {
    super()

    this.state = {
      fieldsInfo: [],
      loaded: false,
      rows: ""
    }

  }

  componentDidMount() {

    const userId = getUserId();

    API.get(constants.urlBackend + '/getUserFieldsInfo/' + userId).then(response => {
      this.setState({
        fieldsInfo: response.data,
        loaded: true
      }, () => {
        console.log(this.state.fieldsInfo)
      })

    })
  }

  getDescription(id) {
    var newArray = this.state.fieldsInfo.filter(function (el) {
      return el.week_number == id
    })
    return newArray[0].text;
  }

  getRating(id) {
    var newArray = this.state.fieldsInfo.filter(function (el) {
      return el.week_number == id
    })
    return newArray[0].rating;
  }

  componentDidUpdate(){
    if(this.loaded ){
      this.composer();
    }
  }
  composer(){
     var row = ({ index, style }) => {
      const { weeksToRegisterDate, currentWeek } = this.props;
      console.log("index")
      console.log(index)
      if(this.state.loaded){
        console.log(this.getDescription(index))
        return (
           <CalendarFields
             key={index}
             weekId={index}
             style={style}
             weeksToRegisterDate={weeksToRegisterDate}
             currentWeek={currentWeek}
             description={this.getDescription(index)}
             rating={ this.getRating(index)}

            />
         );
      }

    }
    this.setState({
      rows: row
    }, () => console.log(this.state.rows))
  }

  render() {

    let rows = []

    if (this.state.loaded) {
      const { totalWeeks, weeksToRegisterDate, currentWeek } = this.props;
      return (
        <div className="fieldsContainer ">

              <List
                className="List"
                height={1000}
                itemCount={totalWeeks}
                itemSize={300}
                width={1000}
              >
                {this.state.rows}
              </List>

        </div>
      );
    } else {
      return <div className="gridLoadingContainer"><CircularProgress color="primary" iconStyle={"width: 150, height:150"}/></div>
    }

  }
}

export default CalendarGrid;

```

Not really getting it to work tho. I tried to do so, because it is failing to wait for the data fetching apparently