Showing window after it is fully loaded

Question

When I create basic application and initialize it using electron command, it shows me a blank window and a moment later loads the content.

Which event and which object should be used to show the window after the content is fully loaded?

did-finish-load on a window.webContent object? Or maybe dom-ready? Or maybe something else?

app.js:

var app = require('app'),
    Window = require('browser-window'),
    mainWindow = null;

require('crash-reporter').start();

app.on('ready', function() {
   mainWindow = new Window({ width: 600, height: 400, show: false });

   mainWindow.loadUrl('file://' + __dirname + '/index.html');
   mainWindow.show();

   //
   // mainWindow.webContent.on('did-finish-load', function() {
   //     something like that is a proper way?
   // });
   //
});

Answer 1

OK, I found an answer myself. The proper event is did-finish-load and should be used like this:

var Window = new BrowserWindow({ width: 600, height: 400, show: false });
Window.loadUrl('file://somefile.html');
Window.webContents.on('did-finish-load', function() {
    Window.show();
});

---

For people finding this answer - here you can check official electron documentation on this topic:

While loading the page, the ready-to-show event will be emitted when the renderer process has rendered the page for the first time if the window has not been shown yet. Showing the window after this event will have no visual flash:

let win = new BrowserWindow({show: false})
win.once('ready-to-show', () => {
  win.show()
})