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 w

Answer 1

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

  @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/