Electron app loading without loading react app fully loaded.  #3256

const additionalData = { myKey: "My_KEY" };
const gotTheLock = app.requestSingleInstanceLock(additionalData);

// const controller = new AbortController();
let childMigrateProcess = {};
let childServer = {};

//main window object
let mainWindow = null;

//splash window object
let splashWindow = null;

try {
  //setting app name for notification
  if (process.platform === "win32") {
    app.setAppUserModelId(app.name);
  }

  // Handle creating/removing shortcuts on Windows when installing/uninstalling.
  if (require("electron-squirrel-startup")) {
    app.quit();
  }

  //disabling h/w acceleration
  app.disableHardwareAcceleration();

  //for app icon in mac
  if (process?.platform === "darwin") {
    const image = nativeImage.createFromPath(
      path.join(__dirname, "./assets/app_icon/AppIconMac.png")
    );
    app.dock.setIcon(image);
  }

  //got the lock
  if (!gotTheLock) {
    log.error("Unable to get the instance lock. Quitting App");
    app?.exit();
  } else {
    app.on(
      "second-instance",
      (event, commandLine, workingDirectory, additionalData) => {
        // Print out data received from the second instance.
        // Someone tried to run a second instance, we should focus our window.
        if (splashWindow) {
          if (splashWindow?.isMinimized()) splashWindow?.restore();
          splashWindow?.focus();
        } else if (mainWindow) {
          if (mainWindow.isMinimized()) mainWindow.restore();
          mainWindow.focus();
        }
      }
    );
    // Create myWindow, load the rest of the app, etc...

    //create splash window
    const createSplashWindow = () => {
      splashWindow = new BrowserWindow({
        minWidth: 300,
        minHeight: 168,
        maxWidth: 500,
        maxHeight: 281,
        resizable: false,
        frame: false,
        center: true,
        icon:
          process.platform === "darwin"
            ? nativeImage.createFromPath(
                path.join(__dirname, "./assets/app_icon/AppIconMac.png")
              )
            : nativeImage.createFromPath(
                path.join(__dirname, "./assets/app_icon/AppIcon.png")
              ),
        webPreferences: {
          // nodeIntegration: true,
          // contextIsolation: false,
          // enableRemoteModule: true,
          preload: SPLASH_WINDOW_PRELOAD_WEBPACK_ENTRY,
        },
      });

      // Open the DevTools.
      splashWindow.loadURL(SPLASH_WINDOW_WEBPACK_ENTRY, {
        userAgent: "Chrome",
      });
      splashWindow.on("closed", function () {
        splashWindow = null;
      });
    };

    log.info("Inititalized the splash window");

    // create main window
    const createWindow = ({ width, height }) => {
      // Create the browser window.
      mainWindow = new BrowserWindow({
        width: width,
        height: height,
        // show: false,
        frame: true,
        title: "Test App",
        icon:
          process.platform === "darwin"
            ? nativeImage.createFromPath(
                path.join(__dirname, "./assets/app_icon/AppIconMac.png")
              )
            : nativeImage.createFromPath(
                path.join(__dirname, "./assets/app_icon/AppIcon.png")
              ),
        webPreferences: {
          // nodeIntegration: true,
          nodeIntegrationInWorker: true,
          contextIsolation: true,
          // enableRemoteModule: true,
          preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
          //attaching the preload script
          // preload: path.join(__dirname, "preload.js"),
        },
      });

      //for opening the urls in browsers
      mainWindow.webContents.setWindowOpenHandler((edata) => {
        shell.openExternal(edata.url);
        return { action: "deny" };
      });

      // and load the index.html of the app.
      mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY, { userAgent: "Chrome" });
      mainWindow.menuBarVisible = false;
      // Open the DevTools.
      mainWindow.webContents.openDevTools();

      //for close confirmations
      mainWindow.on("close", function (e) {
        let response = dialog.showMessageBoxSync(this, {
          type: "question",
          buttons: ["Yes", "No"],
          title: "Test App",
          message: "Are you sure you want to quit?",
          icon:
            process.platform === "darwin"
              ? nativeImage.createFromPath(
                  path.join(__dirname, "./assets/app_icon/AppIconMac.png")
                )
              : nativeImage.createFromPath(
                  path.join(__dirname, "./assets/app_icon/AppIcon.png")
                ),
        });

        if (response == 1) e.preventDefault();
      });
      mainWindow.on("closed", function () {
        mainWindow = null;
      });
    };

    log.info("Inititalized the main window");

    app.on("ready", () => {
      const area = screen.getPrimaryDisplay().workAreaSize;
      //creates the splash window
      createSplashWindow();
      log.info("Created the splash window");
      setTimeout(() => {
        splashWindow.close();
        createWindow({ ...area });
        log.info("Created the main window");
      }, 5000);
    });
  }

  app.on("browser-window-blur", function () {
    globalShortcut.unregisterAll([
      "CommandOrControl+R",
      "F5",
      "CommandOrControl+Alt+I",
      "CommandOrControl+Alt+D+T",
      "CommandOrControl+Shift+I",
      "CommandOrControl+Alt+D+T",
    ]);
  });
  // Quit when all windows are closed, except on macOS. There, it's common
  // for applications and their menu bar to stay active until the user quits
  // explicitly with Cmd + Q.

  app.on("window-all-closed", async () => {
    //close all node child process
    try {
      //kill the server process
      childProcessPromisify(killProcessCommand(), {})
        .then((args) => {
          log.info("App Closed Successfully");
          //server process killed
          app.quit();
        })
        .catch((error) => {
          log.warning(`App Closed with error ${error?.message}`);
          //any error on killing server process
          app.quit();
        });
    } catch (error) {
      log.warning(`App Closed with error ${error?.message}`);
      //any error in performing above action
      app.quit();
    }
  });

  app.on("activate", () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>