Electron JS running time consuming process in the back

Question

TLDR

I am using reZach's repo (https://github.com/reZach/secure-electron-template) as a starting guide and it works so far so good. I am able to communicate back and forth ipcMain, ipcRenderer and React typescripts.

However, I still lack of many knowledge.

1. Refer to Image 1 where an user will click Convert then I will run the process in the background and the user can still continue other operations. The convert process usually handles .xlsx file around 90MB.
2. The Template menu on the left will handle the connection to SFTP to read & write around 5k .xml files continuously.

So my question is:

How do I run processes in the background and display the progress in the page marked in red 2 in Image 1. Should I use multi-thread or service-workers or child process or etc for these kind of tasks?

Also, the progress bar is not actually calculating anything but the numbering [3] on the right indicates how many tasks left. But when user click to enter the page, they will see a list of running processes there.

Image 1

Story before the Electron JS development

I have developed a system using python for data processing stuff e.g. reading and writing large excel 90MB+ and connecting to SFTP to process around 5k+ xml files continuously (the connection would drop after around 500 files but I just programmatically re-run it). So far in python it is working fine but I would like to develop another copy using web technologies via Electron JS.