Electron app stops rendering while running Javascript code

Question

I'm currently working on an electron app that is essentially a DDNS launcher for a media server I control. Basically, it checks for an internet connection, gets the current IP for the server, then opens it in the system's default browser. However, the splash screen that I wrote is totally broken.

Whenever I launch the app on my system (using npm from the terminal), it loads the frame, but the image freezes loading at about the 1/3 point. It won't load the rest of the image until the script that it at the bottom of the main HTML page is finished executing.

Is there something I'm missing about this? I can provide excerpts of the code if needed.

EDIT:

Source code excerpt:

 <script> function wait(ms) { var start = new Date().getTime(); var end = start; while (end < start + ms) { end = new Date().getTime(); } } const isOnline = require('is-online'); const isReachable = require('is-reachable'); const { shell } = require('electron'); window.onload = function() { // Main Script console.log('before'); wait(3000); document.getElementById('progresstext').innerHTML = "Testing connection..."; bar.animate(0.15); // Number from 0.0 to 1.0 wait(250); var amIOnline = false; if (isOnline()) { amIOnline = true; } console.log("Internet Test Ran"); if (!amIOnline) { document.getElementById('errortext').innerHTML = "ERROR: No internet connection. Check the internet connection."; document.getElementById('progresstext').innerHTML = "ERROR"; } var isEmbyReachable = false; if (isReachable('******')) { isEmbyReachable = true; document.getElementById('progresstext').innerHTML = "Connection Test: Passed"; //=> true } //Open Emby in the default browser if (amIOnline && isEmbyReachable) { shell.openExternal("*****"); } }; </script> 

Pastebin link to the full source: https://pastebin.com/u1iZeSSK

Thanks

Development System Specs: macOS Mojave 10.14, Latest stable build of electron

Answer 1

The problem is in your wait function, since node js is sigle threaded your wait function is blocking your process. You may try following code. But I really recommend you to take a look at how to write async functions in JavaScript and setInterval and setTimeout as a start.

But for the time you may try this code.

window.onload = function () {
    // Main Script
    console.log('before');

    // wait 3 seconds
    setTimeout(function () {
        document.getElementById('progresstext').innerHTML = "Testing connection...";
        bar.animate(0.15); // Number from 0.0 to 1.0

        // wait 250 mills
        setTimeout(function () {
            var amIOnline = false;

            if (isOnline()) {
                amIOnline = true;
            }
            console.log("Internet Test Ran");

            if (!amIOnline) {
                document.getElementById('errortext').innerHTML = "ERROR: No internet connection. Check the internet connection.";
                document.getElementById('progresstext').innerHTML = "ERROR";
            }

            var isEmbyReachable = false;
            if (isReachable('******')) {
                isEmbyReachable = true;
                document.getElementById('progresstext').innerHTML = "Connection Test: Passed";
                //=> true
            }

            //Open Emby in the default browser
            if (amIOnline && isEmbyReachable) {
                shell.openExternal("*****");
            }
        }, 250)
    }, 3000)


};

You may not while or any other blocking loops to wait in JavaScript since it will block all other executions including page rendering.