Electron splashscreen on startup application

Question

I've been using Django a lot and now I'm playing with Electron as I would like to create a desktop app.

I wonder is there an easy way to create a splash screen (frameless window) only to display a logo for a few seconds then open a "normal" window where the main application will be rendered ?

Thanks,

Arnaud

Answer 1

A simple splash screen for electron could be something like

let splash

app.on('ready', () => {
  // create main browser window
  mainWindow = new BrowserWindow({
      titleBarStyle: 'hidden',
      width: 1920,
      height: 1080,
      show: false // don't show the main window
  });
  // create a new `splash`-Window 
  splash = new BrowserWindow({width: 810, height: 610, transparent: true, frame: false, alwaysOnTop: true});
  splash.loadURL(`file://${__dirname}/splash.html`);
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // if main window is ready to show, then destroy the splash window and show up the main window
  mainWindow.once('ready-to-show', () => {
    splash.destroy();
    mainWindow.show();
  });
});

Answer 2

To get a frameless window, just set the frameless option to true when creating a new BrowserWindow — known as the Frameless API:

const {BrowserWindow} = require('electron');
let win = new BrowserWindow({
    width: 800, 
    height: 600, 
    frame: false
});
win.show();

Just show that window before you show your 'main' application window, when the app fires the ready event.