Is there a way to eliminate the empty page that appears when transitioning from index.html to contact.html in electron?

Question

Is there a way to eliminate the empty page that appears when transitioning from index.html to contact.html in electron?

Whenever I click on a link, such as in index.html and then select "contact" to go to the external page contact.html, there is a noticeable delay in loading the second page. This delay leads to the creation of a blank page while contact.html is still loading. My current development environment is on a Raspberry Pi 3 running Ubuntu OS.

The issue I am facing is finding a way to eliminate the blank page that appears during the transition from index.html to contact.html within electron. Do you have any suggestions on how to solve this problem?

javascript html css node.js electron

Answer 1

Answer №1

There are essentially two approaches you can take:

Approach 1: Enhance the performance of contact.html by implementing a preloader (a screen that displays while your content loads) and utilizing caching.

Approach 2: Utilize the BrowserWindow's ready-to-show event to display a separate BrowserWindow while the current one loading contact.html is in progress.

Code snippet for Approach 2:

function displayExternalPage(url) {
    let externalWindow = new BrowserWindow({
            width: 1280,
            minWidth: 640,
            height: 960,
            minHeight: 480,
            show: false // -> Will be shown upon content load (ready-to-show), meanwhile display the WaitingWindow
        }),
        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
    }));

    // Display the waitingWindow before the external window is loaded
    waitingWindow.show();

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

Answer 2

There are essentially two approaches you can take:

Approach 1: Enhance the performance of contact.html by implementing a preloader (a screen that displays while your content loads) and utilizing caching.

Approach 2: Utilize the BrowserWindow's ready-to-show event to display a separate BrowserWindow while the current one loading contact.html is in progress.

Code snippet for Approach 2:

function displayExternalPage(url) {
    let externalWindow = new BrowserWindow({
            width: 1280,
            minWidth: 640,
            height: 960,
            minHeight: 480,
            show: false // -> Will be shown upon content load (ready-to-show), meanwhile display the WaitingWindow
        }),
        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
    }));

    // Display the waitingWindow before the external window is loaded
    waitingWindow.show();

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

Answer 3

Answer №2

To achieve a similar color for the background of your web page, try adjusting the backgroundColor property within the settings of your browserWindow. Keep in mind that this setting can only be applied once when creating the browserWindow.

Customizing backgroundColor

Answer 4

To achieve a similar color for the background of your web page, try adjusting the backgroundColor property within the settings of your browserWindow. Keep in mind that this setting can only be applied once when creating the browserWindow.

Customizing backgroundColor

Is there a way to eliminate the empty page that appears when transitioning from index.html to contact.html in electron?

Answer №1

Answer №2

Similar questions

Refreshing information in the MongoDB database

Issues with JSON data not functioning properly when using file system in JavaScript

Stop JSON.parse from shuffling the order of an object

Utilize Python win32 to incorporate a signature into Outlook emails

The compiler option 'esnext.array' does not provide support for utilizing the Array.prototype.flat() method

Tips for developing a directive that supplies values for ng-options

Experiencing difficulties when uploading information to an API in a React JS application

I prefer children to have their own unique style, instead of inheriting their parent's CSS

Deactivating choices in Autoselect from Material UI

What is the method to deactivate all events in React components using refs?

During the initial cycle, the CSS keyframes animation may experience glitches, but it will run smoothly in subsequent cycles

Tips for guaranteeing synchronous loading in your angularjs app.js

Update the div tag container after resizing it

Create a visual representation of a hierarchical structure from a JSON data

Press the button to automatically scroll to a designated div section

Enhancing the current Node.js, Express, MongoDB, and Socket.io stack with the integration of AngularJS

The node command line does not recognize the term 'require'

The Call was successfully completed despite receiving a TwilioException with the message "31002: Connection Declined"

Retrieve the ID from either a search query or an insertion operation in MongoDB

Limiting the number of rows in a PHPexcel array