CODEWITHSUNDEEP
javascriptcsselectron
Jorge Ortega
Jorge Ortega

Reputation: 41

ElectronJS BrowserWindow FOUC

When I create a new BrowserWindow and use loadURL to use an html file inside renderer, I can see a flash of unstyled content for half a second, before the css is loaded I guess.

window.loadURL('file://' + resolve(__dirname, '..', 'static', 'hello-world', 'index.html')

in index.js

import './index.css'

Upvotes: 0

Views: 171

Answers (1)

Hans Koch
Hans Koch

Reputation: 4501

You need to create the window as hidden, and once the content has been loaded (did-finish-load event) you'll show it. This prevents the flashing.

Code for main process

const win = new BrowserWindow({
  width: 800,
  height: 600,
  show: false, // loads the window without showing it
  webPreferences: {
    preload: path.join(__dirname, 'preload.js')
  }
})

win.loadFile('index.html')


win.webContents.on('did-finish-load', function () {
  win.show()  // show the window now since everything is ready
})

Upvotes: 1

Related Questions