Реагировать на загрузчик / счетчик при вызове функции

Question

У меня есть следующая функция:

const saveFile = () => {
    const curState = getState().sheet;
    const cropData = calImgCrop(curState);

    html2canvas(document.querySelector("#grid-container"), {
      x: cropData.xOffset,
      y: cropData.yOffset,
      width: cropData.width,
      height: cropData.height,
    }).then(canvas => {
      downloadFile(canvas.toDataURL('image/png', 0.5), 'result.png');
    });

    const state = {
      scale: curState.scale,
      text: curState.text,
      objects: curState.objects,
      walls: curState.walls
    };
    const compressedJSON = LZUTF8.compress(JSON.stringify(state));
    dispatch(loadFile(
      JSON.parse(LZUTF8.decompress(compressedJSON))
    ));
  }

функция занимает довольно много времени, и я хотел бы добавить к ней счетчик загрузки всякий раз, когда он вызывается. Я новичок в React и не знаю, как мне это сделать. Любая помощь будет принята с благодарностью.

Также, если потребуется дополнительная информация, дайте мне знать.

Answer 1

вы можете использовать оператор if-else для такой загрузки рендеринга

if(!x){

  <loading/>

 } else {

  <mainView/>
}

x - это ответ на ваш запрос

Answer 2

Вы можете отправить действие, которое сигнализирует о начале загрузки в начале функции. Ваш редуктор может обработать это действие, чтобы установить некоторое состояние loading. Убедитесь, что вы также установили для loading значение false после завершения асинхронных операций. Ваш компонент может считывать это состояние loading и отображать счетчик, когда это необходимо. это.