The variable isProcessingRecordedAudio flag is not being set back to false after the loading completes.

[MateusGurgel]

Describe the bug The isProcessingRecordedAudio flag is not being set back to false after the loading completes. This make the process of creating a custom loading bar impossible

To Reproduce Here’s the component where the issue occurs:

export function VoiceRecorderButton() {
  const recorderControls = useVoiceVisualizer();
  const [isPlaying, setIsPlaying] = useState(false);

  const onHoldRecordButton = () => {
    recorderControls.startRecording();
  };

  const onReleaseRecordButton = () => {
    recorderControls.stopRecording();
  };

  const onClickDelete = () => {
    recorderControls.clearCanvas();
  };

  const onTogglePlayButton = () => {
    if (isPlaying) {
      recorderControls.stopAudioPlayback();
    } else {
      recorderControls.startAudioPlayback();
    }

    setIsPlaying(!isPlaying);
  };

  console.log("isProcessingStartRecording " + recorderControls.isProcessingRecordedAudio);

  const expression = !recorderControls.isProcessingRecordedAudio;
  return (
    <div className="flex flex-row gap-4">
      {!recorderControls.isCleared && (
        <Button
          type="button"
          onClick={onClickDelete}
          className="bg-primary rounded-full h-12 w-12 flex items-center justify-center text-white transition-all duration-200 "
        >
          <Trash />
        </Button>
      )}

      <div className="rounded-md">
        {expression && (
          <VoiceVisualizer
            height={50}
            width={200}
            controls={recorderControls}
            isControlPanelShown={false}
            isDefaultUIShown={false}
          />
        )}
      </div>

      {!recorderControls.isCleared && (
        <Button
          type="button"
          onClick={onTogglePlayButton}
          className="bg-primary rounded-full h-12 w-12 flex items-center justify-center text-white transition-all duration-200 "
        >
          {isPlaying ? <Pause /> : <Play />}
        </Button>
      )}

      <Button
        onMouseDown={onHoldRecordButton}
        onMouseUp={onReleaseRecordButton}
        type="button"
        className="bg-primary rounded-full h-12 w-12 flex items-center justify-center text-white transition-all duration-200 "
      >
        <Mic size={44} />
      </Button>
    </div>
  );
}

Expected behavior After the loading process finishes, isProcessingRecordedAudio should be set back to false. Currently, it remains true, which prevents the UI from updating correctly.

Package info (please complete the following information):

• Version: ^2.0.8