Электронная загрузка анимации

Question

Может ли кто-нибудь помочь мне реализовать анимацию загрузки моего приложения Electron? Я изучаю эту новую технологию, и было бы неплохо понять правильный способ сделать это.

Я имею в виду что-то вроде:

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

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

Answer 1

Насколько я знаю, нет ни одного события, излучаемый app перед тем ready (единственным исключением является will-finish-launching доступна только на MacOS).

Кроме того, вы не можете открыть ни одного BrowserWindow, перед тем как app будет 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()

Если вы хотите сделать то же самое для BrowserWindow открыт в процессе рендера window.open(), вы можете использовать new-window событие webContents если nativeWindowOpen является 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 
})