How I can show a loader while setTimeOut() function is processing

Question

Need to show a loader wile setTimeOut() function is processing, without using states(react component's state).

When the function is processing the data till then the loader should be displayed on the screen after that the loader should be disappear automatically.

 showData = () => {
    if (!this.errorObject.isValid(this.getColHeader())) {
      alert('Please correct the invalid cells and try again...')
    } else {
      setTimeout(() => {
        const totalRows = this.hotTableComponent.current.hotInstance.countRows();
      const { data :{ dimensions } } = this.props;
      const nullString = dimensions.reduce((acc, currentValue) => acc + currentValue.delimiter, '');
      // eslint-disable-next-line no-plusplus
      for (let rowIndex = 0; rowIndex < totalRows; rowIndex++) {
        const rowData = this.hotTableComponent.current.hotInstance.getDataAtRow(rowIndex)
        rowData.pop();

        const genStr = rowData.reduce((acc, currentValue, index) => {
          const fieldData = dimensions[index].field.data;
          if (fieldData.valueListType === "value" && fieldData.valueType === "undefined") {
            if (fieldData.defaultValue) {
              currentValue = (currentValue) || fieldData.defaultValue;
            }
          } else if (fieldData.valueListType === "codeValue" && currentValue) {
            currentValue = currentValue.slice(currentValue.indexOf('(') + 1, currentValue.length - 1);
          }
          if (currentValue === null) {
            currentValue = ' ';
          }
          return acc + currentValue + dimensions[index].delimiter;
        }, '');

        if (nullString !== genStr) {
            this.updateCell(rowData, rowIndex, genStr);
        }
      }
      }, 100);
    }
  }

Answer 1

If you really, and I mean really, don't want to use states you can achieve this by having the loading icon always be rendered but having an opacity of 0. Then before you call setTimeout you can use a ref to the loading icon to set it's opacity to 1. Then you can set it to 0 again when the setTimeout is executing.

I would not advice going this route though and instead to just use a state to indicate whether or not a component (such as a loading icon) should be shown.