ipcRenderer.send(...) call freezes renderer thread


#1

I am using React to render the view on the frontend, and have a dropzone element.
I am able to receive the files that are uploaded, and I’ve written a function that updates a local db (lowDB - just a json file) and runs some scripts to process the files.

However, while it is processing (on the main thread) the renderer thread freezes and gives a beach ball of death. I am sending events back to the renderer thread that contain the progress of this long-running process, but those only appear AFTER the process is complete, all in a row, like they’ve been clogged up in a pipe somewhere.

Roughly:

View file:


var DropzoneDemo = React.createClass({
  onDrop: function (files) {
    console.log('sending files: ' + JSON.stringify(files));
    ipcRenderer.send('photo-upload', files.map((file) => file.path));
  },
  
  render: function () {
    return (
      <div>
      	<Dropzone onDrop={this.onDrop}>
      	  <div>Drop some files here, or click to select files to upload.</div>
      	</Dropzone>
        {this.props.hashed} of {this.props.totalfiles}
      </div>
    );
  }
});

main.js

ipcMain.on('photo-upload', function(event, arg) {
  db.resetDB();
  //Long term process being run as a shell script
  resizeAll(dir, function(error, stdout, stderr){
    if(error){
      console.log(error);
      console.log(stderr);
    }
  });
  // ... more code here to run another process that deals with the first process
  console.log("returning from photo-upload event.")
})

The log returning from photo-upload event occurs immediately after calling the function, which means that nothing is blocking the thread… yet everything freezes.

Help!