Electron loading animation

Question

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

I am thinking about something like :

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

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

Answer 1

As far as I know there is no event emitted from app before ready (only exception is will-finish-launching available only on macOS).

Furthermore, you cannot open any BrowserWindow before app is ready, so you should really wait it.

However, if your main application window loading very slow, you can still open a "loading 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()
})

---

^{You can use win.on('ready-to-show') instead of win.webContents.on('dom-ready') everywhere if you want to eliminate visual flash (but losing some speed)}

---

window.open()

If you want to do the same for BrowserWindow opened in renderer process by window.open(), you can use new-window event of webContents 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
})