Electronic animation download

Question

Can someone help me implement the loading animation of my Electron app? I am learning this new technology and it would be nice to understand the correct way to do this.

I am thinking of something like:

app.on('ready', () => { // show main content }) app.on('not-ready', () => { // show loading animation }) 

Answer 1

As far as I know, there was no ready event in the app (only the will-finish-launching available only on macOS).

Also, you cannot open any BrowserWindow before the app is ready , so you really need to wait for it.

However, if your main application window loads very slowly, you can still open the “download window” before that and switch them when your main window is ready.

 const { app, BrowserWindow } = require('electron') app.on('ready', () => { let main = null let loading = new BrowserWindow({show: false, frame: false}) loading.once('show', () => { main = new BrowserWindow({show: false}) main.webContents.once('dom-ready', () => { console.log('main loaded') main.show() loading.hide() loading.close() }) // long loading html main.loadURL('http://spacecrafts3d.org') }) loading.loadURL('loding.html') loading.show() }) 

---

window.open()

If you want to do the same for a BrowserWindow opened during the rendering process, window.open() , you can use the new-window webContents event if nativeWindowOpen is true

 main = new BrowserWindow({ webPreferences: { nativeWindowOpen: true } }) main.webContents.on('new-window', (event, url) => { // there are more args not used here event.preventDefault() const win = new BrowserWindow({show: false}) win.webContents.once('dom-ready', () => { win.show() loading.hide() // don't destroy in this case }) win.loadURL(url) loading.show() event.newGuest = win })