I am working on a windows electronjs/react app that heavily deals with filesystem. Like creating files, reading, traversing a path recursively that might include tens of dub-directories and files.

To be more concise, the above functionalities working good when i am dealing with a local file system. But when the app has to work against a filesystem inside a shared network drive like (connecting to a remote server using windows remote desktop connection) then performing the above mentioned actions block the renderer process. I have tried using worker threads and electron hidden BrowserWindow as a independant process to carry out the required functions specially the “traversing a path recursively that might include tens of dub-directories and files.”

I am using async versions of every filesystem API and electron IPC API.
I am using ipcRenderer.invoke and ipcMain.handle to communicate in b/w the two processes.

This same shared network drive, when opened with vscode shows the loading indicator for the file explorer menu but does not make vscode to lag and crash.

I am wondering what i am doing wrong here is it the algorithm or should i need to learn something that i am missing?

The algorithm used to traverse filesystem tree inside a shared network drive/folder:

/**
 * This function recursively iterates over a path to load all of the content from the 
 * current path and subdirectories.
 * @param {string} path - Path to load content from.
 * @param {boolean} [isNestedPath=false] - Flag to indicate if the path is nested.
 * @returns {Promise<[{path: string, name: string, type: "file"|"folder", children: []| undefined}]>}
 */
const loadAvailableDocumentsRecursively = async (path, isNestedPath = false) => {
  const isADirPath = await isDir(path);
  
  if (!isADirPath) {
    throw new Error("path argument must be a directory");
  }

  const contentsAtPath = await jetpack.listAsync(path);
  
  // Use Promise.all to load all directory contents in parallel
  const resultPromises = contentsAtPath.map(async (content) => {
    const nestedPath = jetpack.path(path, content);
    const isDirectory = await isDir(nestedPath);

    if (isDirectory) {
      return {
        name: content,
        type: 'folder',
        path: nestedPath,
        isNestedPath,
        children: await loadAvailableDocumentsRecursively(nestedPath, true)
      };
    } else {
      return {
        name: content,
        type: 'file',
        path: nestedPath,
        isNestedPath
      };
    }
  });

  // Resolve all promises and return the result
  return Promise.all(resultPromises);
};

I have also done my research across stakeoverflow but it did not help!

I have tried implementing worker threads and electron hidden BrowserWindow as an independed renderer process to carry out the required operation but no luck.

The mentioned filesystem operations when applied on a network shared drive/folder should not block the UI and main process.