CODEWITHSUNDEEP
javascriptnode.jselectron
IWProgrammer
IWProgrammer

Reputation: 157

How to make new window appear with loading indicator while preload?

I am trying to make a window application in Electron.js. When I run it, it makes preload.js script:

 const mainWindow = new BrowserWindow({
    width: 500,
    height: 500,
    webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration: true
    }
});

I want a new window with a loading indicator to appear till preload.js not finish. How can I reach it?

Upvotes: 0

Views: 517

Answers (1)

Tobias
Tobias

Reputation: 1564

create first the loading window like this:

loadingWindow = new BrowserWindow({
    width: 512,
    height: 384,
    resizable: false,
    transparent: true,
    frame: false,
})
loadingWindow.loadFile('views/loading.html')

make shure that you clear this window if you close it

loadingWindow.on('closed', function () {
    loadingWindow = null
});

than create your main window but hide it

const mainWindow = new BrowserWindow({
    width: 500,
    height: 500,
    show: false, // hide this window
    webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration: true
    }
});
mainWindow.loadFile('yourFile.html');

than get the did-finish-load event to close the loading window and show the mainWindow

mainWindow.webContents.on('did-finish-load', () => {
   if (loadingWindow) loadingWindow.close();
   mainWindow.show();
 })

Upvotes: 1

Related Questions