Stop ajax loading with `esc`

Current

1. Click on the “Issues” tab above
2. Change your mind
3. Can’t do anything, Issues keeps loading
4. When loaded, go back

Desired

1. Click on the “Issues” tab above
2. Change your mind
3. Press esc, loading stops

⬆️ this is how regular pages work, but pjax doesn’t listen to esc

---

IssueHunt Summary

artusm has been rewarded.

Backers (Total: $40.00)

• issuehunt ($40.00)

Submitted pull Requests

• #3465 Add stop-pjax-loading-with-esc feature

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[notlmn]

I’m not sure if https://github.com/defunkt/jquery-pjax is the one GitHub is using, because most of the events are missing from GitHub’s JS files.

So, I came up with a hack using AbortController, that involves replacing fetch at global level.

const actualFetch = self.fetch; // Saving original fetch for later use
const controller = new AbortController();

// Custom fetch, replacing `AbortSignal` on request object
self.fetch = async (request) => {
	console.log(request);
	const newRequest = new Request(request, {signal: controller.signal}); // Create new request, with our own signal
	try {
		return actualFetch(newRequest);
	} catch (error) {
		console.error(error);
	}
};

// Handler to abort fetch
window.addEventListener('keydown', (event) => {
	if (event.key === 'Escape') {
		console.log('Aborting...');
		controller.abort();
	}
});

One catch with the above snippet is that after the fetch is aborted, the user is directly redirected to the target page, which is no the intended behavior, we need the user to stay on the current page.

I think we can manage this using as very clever combination of mousedown, click, and mouseup event handlers and using stopPropagation() if the click actually caused that aborted fetch (haven’t tested that part though).

[fregante]

From “impossible” to “done”

Thanks @artusm!