Skip to content

Getting notified about cancellation of the initial navigation. #256

@jespertheend

Description

@jespertheend

We have a site that shows a loading screen on first page load, which is served in the html of the initial navigation, without running any scripts. We then download all the scripts and assets, which might take a while on slower connections. During this time the user is able to cancel the page load using the escape key.
But this can be a bit confusing, because when cancelling the page load, the text 'loading...' will stay visible forever, or until the page is refreshed. It doesn't help either that the escape key is also used to open the menu once the page has loaded.

So I'm trying to figure out a way to improve the user experience here. I was hoping there would be an event that I could listen for when the page load is cancelled. That way I could change the text to something else. Or maybe prevent the cancellation.
Right now the only thing that seems to work is listening for the 'Escape' key. But without being able to know for sure whether this caused the user agent to prevent loading, the best I can do is preventDefault the event:

window.addEventListener("keydown", e => {
	if (e.code == "Escape") {
		e.preventDefault();
	}
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions