Loading pages with AJAX. Should the browser address change when the user calls the content or once it arrives?

Question

I am loading pages using AJAX and changing the browser address bar accordingly for a smooth experience.

My doubt is if the browser address bar should change when the new page is called by the user (when he interacts with an element like a click in a link) or once the page starts appearing?

Some things to consider:

1. The page fades out with transitions the content that is going to be replaced
2. The new content enters with a fade in
3. The page might give a timeout error (some problem and it couldn't load correctly)
4. The page might not actually exist anymore (404)
5. Some seconds might pass before the content arrives

I have reasons for both of the options but I'm not sure if points 3 and 4 should weight more. Also if the case was 4, should the address change at all?

Answer 1

This answer is based on my experience designing single page applications rather than any research.

I would change the URL when the new page is called for the following reasons:

• It is best to mimic standard browser behaviour so that page loading works the way the user expects or is accustomed to.

• If the new page is taking a while to load, the user might refresh the browser to resend the request. If the URL hasn't changed by this point, then they'll be unexpectedly taken back to the previous page. Depending on the server request pattern being used, this might erase any form data that the user had inputted (for example).

• If the URL changes after the content loads (e.g. by using document.addEventListener("DOMContentLoaded", function(){});) then you risk waiting a very long time for the URL to change if one of the HTTP request hangs, such as a call to Google's font server. During this time the user might think the page has actually loaded, and might copy the old (wrong) URL to share with someone.