Electron “ready-to-show” event not working as expected

Here is a block of code from my application Codey.

src/main.py

// Show window once it has finished initialising
docsWindow.once("ready-to-show", () => {
  if (darkMode) {
    docsWindow.webContents.send("dark-mode:toggle");
  }

  if (!isDarwin) {
    docsWindow.webContents.send("platform:not-darwin");
  }

  docsWindow.webContents.send("docs:jump", section);

  docsWindow.show();
});

src/docs/renderer.js

window.api.darkMode.toggle.receive(toggleDarkMode);

When darkMode = true, toggleDarkMode is never run.

My application has two different windows – an editor and a docs window. For both windows, on the “ready-to-show” event, “dark-mode:toggle” is sent to the renderer process. However, the docs window fails to run the toggleDarkMode function whilst it works for the editor window.

Note: The application must be packaged using “yarn package” as some features do not work in the dev environment.

Any help will be much appreciated.

(Repo: https://github.com/Liamohara/Codey)

Answer

For anyone that’s interested. I found a solution to my issue.

src/main.py

     // Show window once it has finished initialising
-    docsWindow.once("ready-to-show", () => {
+    docsWindow.webContents.once("did-finish-load", () => {
       if (darkMode) {
         docsWindow.webContents.send("dark-mode:toggle");
       }
    
       if (!isDarwin) {
         docsWindow.webContents.send("platform:not-darwin");
       }
    
       docsWindow.webContents.send("docs:jump", section);
    
       docsWindow.show();
     });

In the docs window, there is more HTML content to be renderered than in the editor window. As a result, the DOM takes longer to load and the “ready-to-show” event is emitted before it has finished. Using the “did-finish-load” event, ensures that the API functions are not called before the DOM has finished loading.