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

You can try to load the content in invisible iframe and then create window and transfer content to window from iframe.

Answer 2

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()
})

Answer 3

This way works, however best practice is to use ready-to-show stated by the API documentation:

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:

and please note:

This event is usually emitted after the did-finish-load event, but for pages with many remote resources, it may be emitted before the did-finish-load event.

Lastly you should update the background color to match as close to the content background of your window. Here is an example:

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({show: false, backgroundColor: '#420024'})
win.once('ready-to-show', () => {
  win.show()
})

You can also add quick css fade to make content snap less. Just add this too your css and set .ui.container to whatever class your root DOM element is. Note, doesn't work if you set it to <body/>

  @keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .ui.container {
    animation: fadein 0.420s;
  }

see these links for more information: https://electron.atom.io/docs/all/#using-ready-to-show-event https://www.christianengvall.se/electron-white-screen-app-startup/