How to setup links on my website to actually reload every navigated page ?

Ask the community
,
1

Hi, When navigating inside my website (using links - buttons/text links etc.), I noticed that if I click a link to a different page to my website, the content of the existing page is just being replaced by the new one, and the browser isn’t actually loading the new page (no loader icon on the browser tab).
But if I link to an external page (outside of my website), the browser obviously looks like it is loading a new page.

Here’s an demonstration of my problem:

Go to this page on my website (page 1):
https://vypelink.editorx.io/website-2/page1

https://static.wixstatic.com/media/a27d24_73cbacd920364352996a9f03afa7ba37~mv2.jpg(image larger than 4 MB)

  1. If you click on the first link (“link to page 2 on this site”) which links to a different page on my website, it will load the new page content but if you look at the top bar of the browser - it doesn’t actually looks like the browser is loading a new page (no loader icon on the browser tab and no “X” on the refresh button, which both mean that a new page is loading):

  1. Now go back to page 1. If you click on the second link “link to a different website”, it will load the external website (youtube) , but now the browser will actually look like it’s loading a new page - there is a loader animation that is added to the browser tab and the refresh button is replaced with an “X” button. This is what the browser looks like when a new page is loading:

I want to navigate inside my own website in a way that when a user goes from page 1 to page 2 on my site, the browser will look like it’s actually loading a new page (the loader animation will be present on the browser tab and the refresh button will be replaced with an x). Currently, when page 2 is being loaded the browser doesn’t show any signs of loading a new page until it’s actually loaded. And in cases where the new page is taking 2-3 seconds to load, it’s confusing because the user doesn’t know if something is happening after they clicked the linked.

Conclusion:
Currently, inner navigation inside my editor X website act’s a single page app for some reason - newly navigated pages aren’t actually loading from zero - the content of the previous page is just being replaced with the new one without the browser showing signs of loading a new page (now loading signs on the browser).

I want each navigated page to look like it’s actually loading on the browser and not act as a single page app. How do I set up my links to do that?

Thanks

2

Hi there :wave:t2: This happens because of the way that Wix sites are set up to be Single Page Applications, rather than Multi Page Applications.

Something that I do to create an indication that the page is changing is create a container box (with “loading” text, spinning gif, whatever you want), that is pinned to the screen and hidden on load.

I then store all my button elements in an array like so:

const btnElm = [
    // These are all my button ID names
    "btnCompleted",
    "btnResume",
    "btnBeginUnit",
    "image1",
]

And use this code to show the box when each button is clicked, so users get a sense that something is happening.

btnElm.forEach(btnID => {
        let url = $w("#" + btnID).link; // Gets link for each button
        $w("#" + btnID).onClick(() => { // Click event for all buttons
            
            $w('#loadingBox').show(); // Shows loading message
            wixLocation.to(url); // Navigates to link of button
    })
})

So the final code is like this:

import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

const btnElm = [
    // These are all my button ID names
    "buttonName1",
    "buttonName2",
    "buttonName3",
    "buttonName4",
    // Etc
]

$w.onReady(function () {
    btnElm.forEach(btnID => {
        let url = $w("#" + btnID).link; // Gets link for each button
        $w("#" + btnID).onClick(() => { // Click event for all buttons
            $w('#loadingBox').show(); // Shows loading message
            wixLocation.to(url); // Navigates to link

            if (wixWindow.formFactor === "Mobile") { 
            // disables on mobile, since pinned elements don't work there
                $w("#loadingBox").hide();
                wixLocation.to(url);
            }
        })
    })
})

I hope this can help you!

3

I truly appreciate your detailed response.
Will definitely give it a try!

Thank you very much