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