Скачать или смотреть How to Make a Loading Indicator Window in Electron.js Until Preload.js Completes

Discover how to create a new window in Electron.js that displays a loading indicator while your preload.js script runs, making your applications more user-friendly and engaging.
---
This video is based on the question https://stackoverflow.com/q/62694760/ asked by the user 'IWProgrammer' ( https://stackoverflow.com/u/7202203/ ) and on the answer https://stackoverflow.com/a/62739474/ provided by the user 'Tobias' ( https://stackoverflow.com/u/5132559/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to make new window appear with loading indicator while preload?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating a Loading Indicator Window in Electron.js

When developing applications using Electron.js, ensuring a seamless user experience is key. Sometimes, during the loading or initialization phase, especially while executing a script like preload.js, it can be beneficial to display a loading indicator. This not only informs users that the application is still active but also enhances the overall feel of your application. In this guide, we will guide you through the steps to create a loading window that appears while your preload.js script is running.

Understanding the Problem

You're trying to make an Electron.js application and want to display a loading screen until the preload.js script finishes executing. The loading window will inform your users that their request or the app is processing, preventing them from feeling like the application has frozen.

Step-by-Step Solution

Step 1: Create the Loading Window

The first step is to create a window that will serve as your loading indicator. Here's how to do it:

[[See Video to Reveal this Text or Code Snippet]]

Explanation:

The BrowserWindow is configured to be a specific size (512x384), non-resizable, transparent, and without a frame. The associated HTML file loading.html will contain your loading animation or message.

Step 2: Handling Window Closure

To manage the loading window properly, ensure that it is cleared from memory when it’s closed:

[[See Video to Reveal this Text or Code Snippet]]

Why is this important?

This line of code helps to avoid memory leaks by setting loadingWindow to null when it is closed, which is a good practice in Electron applications.

Step 3: Create the Main Window (Hidden)

Next, you will create the main application window but keep it hidden initially:

[[See Video to Reveal this Text or Code Snippet]]

Details:

The show: false option ensure that this window does not appear to the user until the preprocessing is complete.

Step 4: Displaying the Main Window After Loading

Once the preload.js script is finished, you will want to show the main window and close the loading indicator:

[[See Video to Reveal this Text or Code Snippet]]

How It Works:

The did-finish-load event triggers when the mainWindow has completely loaded. Here, we close the loadingWindow (if it's open) and subsequently display the mainWindow.

Conclusion

By following these steps, you can significantly enhance the user experience of your Electron.js application. The loading window ensures users know that the application is active and processing their request, thus preventing confusion or perceived inactivity. With just a few lines of code, you can create a more interactive and friendly interface.

Implement this feature today and take your Electron app to the next level! Happy coding!