Best way to make and handle custom Electron Dialogs?

#1

In our project, we need to use custom electron dialog windows, that have really fast opening time.

  1. I tried the dialog module (in electron), but there’s no way to edit it, although the time it takes to open the window is really fast.
  2. Then, I made a modal window (using BrowserWindow) and made it act as a dialog when needed. This worked in a way as we were able to customize it however we want. But, the major issue is that it takes about 3-4 seconds to open a new modal window (worse if PC’s performance is bad). This time consumption is causing a lot of issues as we have parts in the project where the user needs to notified instantly (errors and confirmations).
  3. As another solution, I started creating a modal window at a very initial stage, then hide it and show it to the user (with updated contents using React states and props) whenever needed. This worked, however, since the application is already quite heavy, adding and keeping another Electron window open since the beginning is consuming a lot of memory.
  4. I have used multiple packages as well, but all have the same time issue.

As of now, I have tried these solutions but all have bad parts that we are trying to majorly avoid.

I am trying to achieve the best possible way to handle these windows, which would be: opens really fast (<1s), is custom and less memory consumption.

Have I exhausted all my options? Or, is there any other way I can go about this problem.

Any help would be appreciated.

#2

You could use a lightbox to make a modal UI component inside your BrowserWindow, like you would on a site.

What do you mean by “there’s no way to edit it”? dialog.showMessageBox() lets you set whatever message and button text you want. Do you want to change the text of the modal while it’s open? Do you want to style the box itself to look like your application?

#3

Styling the box to look like my application was an issue for me in dialog.showMedsageBox().

#4

You might want to just do the modal in CSS and HTML inside your app, then.

#5

Just for information, I am using React in Electron.

Also about modal in CSS and html, I am already doing it (React component). The problem is that this Modal takes about 2-5 seconds to load, and this delay is what is one of my issues (as mentioned in the question above). It also adds about 150-200 mbs of memory to the application.

#6

In your first post, you said that you made a new BrowserWindow to make the modal, and that’s what caused the delay. But if you do what I recommend and use the lightbox technique to make a modal inside your current window (since all you need to do is block your UI and maybe flash the taskbar, none of which requires spawning a new window), it should take only a few milliseconds.