Create a Loading Screen in Electron

date

Jun 21, 2023

slug

create-a-loading-screen-in-electron

author

status

Public

📜 Table of Contents

📜 Table of Contents 📖 Create a Loading Screen in Electron ✅ Install Electron ✅ Create the Main Window Details ✅ Create the Loading Screen Details ✅ Create a HTML file for your loading screen ✅ Import Loading Screen in Main

📖 Create a Loading Screen in Electron

example-code-5

changjoon-park • Updated Jun 21, 2023

To make a loading screen in Electron, you can create a new browser window and show it before your main app window loads. Then, when the main app window is ready to show, you can close the loading window.

✅ Install Electron

Before creating a loading screen, you need to make sure that you have Electron installed. If not, you can do it by using the following command in your terminal:


npm install --save electron

✅ Create the Main Window

Create a new file main.js and create your main window:


const { app, BrowserWindow } = require('electron')

let mainWindow

function createMainWindow () {
  mainWindow = new BrowserWindow({
    show: false, // this line is important to work with the splash screen
    // other options you want to add
  })

  mainWindow.loadURL(/* URL you want to load */)

  // when the main window is ready, close the loading screen
  mainWindow.on('ready-to-show', () => {
    loadingScreen.close()
    mainWindow.show()
  })

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createMainWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createMainWindow()
  }
})

example-code-5\main.js

Details


function createMainWindow () {
  mainWindow = new BrowserWindow({
    show: false, // this line is important
    // other options
  })

We're defining a function to create the main window of our app. Note that we set show to false to prevent the window from showing immediately after it is created.


mainWindow.on('ready-to-show', () => {
    if(loadingScreen) {
      loadingScreen.close()
    }
    mainWindow.show()
  })

We're setting up an event listener for the ready-to-show event, which is emitted when the window's web page is fully loaded and the window can be displayed without a visual flash. When this event is emitted, we close the loading screen and show the main window.


mainWindow.on('closed', () => {
    mainWindow = null
  })
}

We're setting up an event listener for the closed event, which is emitted when the window is closed. When this event is emitted, we set mainWindow to null to dereference the window.


app.on('ready', () => {
    loadingScreen = createLoadingScreen();
    setTimeout(() => {
      if (loadingScreen) {
        loadingScreen.close();
        loadingScreen = null;
      }
      createMainWindow()
      mainWindow.show()
    }, 2000);
  })

We're setting up an event listener for the ready event, which is emitted when Electron has finished initializing. When this event is emitted, we create the loading screen and after 2 seconds (2000 milliseconds), we close the loading screen, create the main window, and show the main window.

✅ Create the Loading Screen

Create another file loading.js for the loading screen:


const { BrowserWindow } = require('electron')

let loadingScreen

function createLoadingScreen() {
  loadingScreen = new BrowserWindow(
    Object.assign({
      width: 200,
      height: 400,
      frame: false,
      transparent: true
    })
  )

  loadingScreen.setResizable(false)
  loadingScreen.loadURL('path/to/your/loadingScreen.html')

  loadingScreen.on('closed', () => (loadingScreen = null))
  loadingScreen.webContents.on('did-finish-load', () => {
    loadingScreen.show()
  })
}

module.exports = {
  createLoadingScreen,
}

example-code-5\loading.js

Details


loadingScreen = new BrowserWindow(
  Object.assign({
    width: 400,
    height: 200,
    frame: false,
    transparent: false
  })
)

Here we're creating a new BrowserWindow and assigning it to our loadingScreen variable. The BrowserWindow class takes an options object where you can specify many settings for the window. In this case, we're creating a window of 400 pixels by 200 pixels without a frame and without transparency.


loadingScreen.setResizable(false)

This line is calling the setResizable method on our loading screen window to make it non-resizable.


loadingScreen.loadURL('loadingscreen.html')

This line is telling the loading screen window to load the HTML file named 'loadingscreen.html'. This file should contain the HTML that will be displayed in the loading screen.


loadingScreen.on('closed', () => (loadingScreen = null))

This is adding an event listener to the closed event of the loading screen window. When the window is closed, we set the loadingScreen variable to null, effectively dereferencing the window.


loadingScreen.webContents.on('did-finish-load', () => {
  loadingScreen.show()
})

Here we're adding an event listener to the did-finish-load event of the web contents of the loading screen window. The did-finish-load event is fired when the web page has finished loading. When this happens, we call the show method on the loading screen window to make it visible.


module.exports = {
  createLoadingScreen,
}

Finally, we're exporting the createLoadingScreen function from this module so that it can be imported and used in other files in your project. The module.exports object is provided by Node.js and is used to define what a module exports and makes available through require.

✅ Create a HTML file for your loading screen

You should have a HTML file (let's call it loadingScreen.html) which will be displayed as your loading screen:


<!DOCTYPE html>
<html>
  <body>
    <h1>Loading...</h1>
    <!-- Add any loading animation or image you want -->
  </body>
</html>

example-code-5\loadingScreen.html

✅ Import Loading Screen in Main

Import the loading screen in the main file and display it before your main window loads. Update your main.js:


const { app, BrowserWindow } = require('electron')
const { createLoadingScreen } = require('./loading')

...

example-code-5\main.js (updated)

Now, whenever you run your Electron app, you'll first see the loading screen, and when the main window is ready, the loading screen will close and the main window will appear.