how can i remove the blank page created during the transition from index.html to contact.html in electron?

Question

When I click on a link, for example in index.html and I click "contact" which is external "contact.html", the time needed to load the page "contact.html" is to slow. and this Leeds to create a blank page while the second page is loading. I am developing on a raspberry pi 3 with ubuntu as OS .

MY problem here is how can i remove the blank page created during the transition from index.html to contact.html in electron , any suggestions?

Answer 1

You basically have two options:

Option 1: Optimize contact.html to use a preloader (Waiting screen while your content loads) and caching.

Option 2: Use the BrowserWindow's ready-to-show event and show a different BrowserWindow while the one showing contact.html is still loading

Code for Option2:

function showExternalPage(url) {
    let externalWindow = new BrowserWindow({
            width: 1280,
            minWidth: 640,
            height: 960,
            minHeight: 480,
            show: false // -> Don't show it, it'll be shown when the content has been loaded (ready-to-show), show the WaitingWindow in the meantime
        }),
        waitingWindow = new BrowserWindow({
            width: 300,
            height: 200,
            transparent: true,
            frame: false,
            alwaysOnTop: true,
            show: false
        });

    externalWindow.loadURL(url);
    waitingWindow.loadURL(url.format({
        pathname: "PATH_TO_WAITING_HTML",
        protocol: 'file:',
        slashes: true
    }));

    // Show the waitingWindow prior to the external window
    waitingWindow.show();

    externalWindow.once('ready-to-show', () => {
        externalWindow.show();
        waitingWindow.destroy();
    });
}