refactor: renderTemplate to async function, updated call to transitions API to wait until template is fully rendered before transitioning

public/src/ajaxify.js

@@ -2,6 +2,7 @@
 
 const hooks = require('./modules/hooks');
 const { render } = require('./widgets');
+const transitions = require('./modules/transitions');
 
 window.ajaxify = window.ajaxify || {};
 ajaxify.widgets = { render: render };
@@ -50,7 +51,7 @@ ajaxify.widgets = { render: render };
 
 		ajaxify.cleanup(url, ajaxify.data.template.name);
 
-		if ($('#content').hasClass('ajaxifying') && apiXHR) {
+		if (transitions.isActive() && apiXHR) {
 			apiXHR.abort();
 		}
 
@@ -67,7 +68,6 @@ ajaxify.widgets = { render: render };
 		}
 
 		previousBodyClass = ajaxify.data.bodyClass;
-		$('#footer, #content').removeClass('hide').addClass('ajaxifying');
 
 		ajaxify.loadData(url, function (err, data) {
 			if (!err || (
@@ -83,8 +83,12 @@ ajaxify.widgets = { render: render };
 			}
 
 			retry = true;
-
+			transitions.start(async () => {
-			renderTemplate(url, data.templateToRender || data.template.name, data, callback);
+				await renderTemplate(url, data.templateToRender || data.template.name, data);
+				if (typeof callback === 'function') {
+					callback();
+				}
+			});
 		});
 
 		return true;
@@ -157,8 +161,12 @@ ajaxify.widgets = { render: render };
 					data.responseJSON.config = config;
 				}
 
-				$('#footer, #content').removeClass('hide').addClass('ajaxifying');
+				transitions.start(async () => {
-				return renderTemplate(url, status.toString(), data.responseJSON || {}, callback);
+					await renderTemplate(url, status.toString(), data.responseJSON || {});
+					if (typeof callback === 'function') {
+						callback();
+					}
+				});
 			} else if (status === 401) {
 				require(['alerts'], function (alerts) {
 					alerts.error('[[global:please_log_in]]');
@@ -186,29 +194,24 @@ ajaxify.widgets = { render: render };
 		}
 	}
 
-	function renderTemplate(url, tpl_url, data, callback) {
+	async function renderTemplate(url, tpl_url, data) {
 		hooks.fire('action:ajaxify.loadingTemplates', {});
-		require(['translator', 'benchpress'], function (translator, Benchpress) {
+		const [translator, Benchpress] = await app.require(['translator', 'benchpressjs']);
-			Benchpress.render(tpl_url, data)
+		return Benchpress.render(tpl_url, data)
-				.then(rendered => translator.translate(rendered))
+			.then(rendered => translator.translate(rendered))
-				.then(function (translated) {
+			.then(function (translated) {
-					translated = translator.unescape(translated);
+				console.log('got here');
-					$('body').removeClass(previousBodyClass).addClass(data.bodyClass);
+				translated = translator.unescape(translated);
-					$('#content').html(translated);
+				$('body').removeClass(previousBodyClass).addClass(data.bodyClass);
+				$('#content').html(translated);
 
-					ajaxify.end(url, tpl_url);
+				ajaxify.end(url, tpl_url);
+				transitions.end();
 
-					if (typeof callback === 'function') {
+				// Only executed on ajaxify. Otherwise these'd be in ajaxify.end()
-						callback();
+				updateTitle(data.title);
-					}
+				updateTags();
-
+			});
-					$('#content, #footer').removeClass('ajaxifying');
-
-					// Only executed on ajaxify. Otherwise these'd be in ajaxify.end()
-					updateTitle(data.title);
-					updateTags();
-				});
-		});
 	}
 
 	function updateTitle(title) {

public/src/modules/transitions.js

@@ -0,0 +1,33 @@
+let active = false;
+
+export async function start(process) {
+	if (active) {
+		return;
+	}
+
+	active = true;
+
+	if (!document.startViewTransition) {
+		$('#footer, #content').removeClass('hide').addClass('ajaxifying');
+		await process();
+		return;
+	}
+
+	document.startViewTransition(process);
+}
+
+export function end() {
+	if (!active) {
+		return;
+	}
+
+	if (!document.startViewTransition) {
+		$('#content, #footer').removeClass('ajaxifying');
+	}
+
+	active = false;
+}
+
+export function isActive() {
+	return active;
+}