In our Previous Article we discussed about some good to have features in Electron App. If you are directly arriving on this article, please you must first go through Basics of electron js.

One of the important factors amongst others that let the users evaluate the performance of an application, is its loading time and that can prove to be annoying for an end user. Business can leave a gratifing impression on an end user if we transpose that loading time with an appealing splash screen. Certainly, if loading time is too high then you must first consider optimizing the application's performance.

This article will elaborate on, How to implement simple splash screen at the start of a desktop application in Electron App. Technically, we will try to conceal the loading time by means of introducing a light weight electron screen with some attractive progress bar on it. Once main window is ready to show, we can destroy the splash screen and toggle to the main window.

Lets create a design for our splash screen. Add an html file in our project splashscreen.html add following code snippet in it. It also include logic to show progress bar.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steady Readers</title>
<base href="./">
<style>
    body {
      background-color:#537E3F;
    }
    .centered-section{
      display: inline-block;
    position: absolute;
    top: 50%;
    left: 42%;
    transform: translate(-37%,-50%);
 
    }
    .centered-section span {
      font-size: 40px;
    font-weight: normal;
    font-family: sans-serif;
    color:white;
    }
    .header img {
      padding: 10px 0px 0px 5px;
      width: 40px;
      height: 30px;
    }
    .header{
      color:#537E3F;
    }
    #splash-progress-bar-status { 
      background-color: #537E3F; 
    } 
    #splash-progress-bar { 
    width: 1%; 
    height: 1px; 
    text-align: center; 
    line-height: 32px; 
    background-color: white;
    } 
 
 
                            </style>
                            <meta name="viewport" content="width=device-width, initial-scale=1">
                            <link rel="icon" type="image/x-icon" href="favicon.ico">
                            </head>
                            <body> 
                            <div class="header">
                            <span><img src="assets/images/light-bulb-icon.png"></span>
                            <div class="centered-section "><span>Steady Readers</span>
                            <br/><br/>
                            <div id="splash-progress-bar-status"> 
                            <div id="splash-progress-bar"></div> 
                            </div> 
                            </div>
 
                            <script> 
                            function update() { 
                            var element = document.getElementById("splash-progress-bar"); 
                            var width = 1; 
                            var identity = setInterval(scene, 10); 
                            function scene() { 
                            if (width >= 100) { 
                            var ipcRenderer = require('electron').ipcRenderer;
          ipcRenderer.send('showMainWindow');
        clearInterval(identity); 
                            } else { 
        width++; 
        element.style.width = width + '%'; 
                            } 
                            } 
                            } 
      update();
                            </script> 
</body>
</html>
 
 

Now, when we are ready with splash screen design, its time to link it with main window. Please update index.ts with following code snippet.

Set main window instance show:false by default and append a splash screen window instance in event below:

app.on('ready', function() {
    //Existing main window instance.
    //Append here Splash window instance
});

splashScreen = new BrowserWindow({
    minWidth: 400,
    minHeight: 280,
    width: 500,
    height: 280,
    center:true,
    backgroundColor: '#e0eff8',
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
                            },
    frame: false,
    skipTaskbar: true,
    resizable: false,
    alwaysOnTop: true,
});
  splashScreen.loadURL(__dirname + '/../splashscreen.html');

Code snippet below is responsible to destroy splash screen and toggle to the main window. Once progress bar reaches 100%, ipcRenderer communicates through showMainWindow channel to ipcMain. Append this code snippet at end of index.ts

ipcMain.on('showMainWindow',()=>{
    splashScreen.destroy();
    mainWindow.maximize();
});

NOTE: you may have to import some electron modules based upon code snippet.

When you start the application you must be able to see splash screen above and once processing is done, main screen appears.