From bc29c3a49b258f9c8895f99d0632a5d6ece2419a Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Tue, 28 Mar 2023 14:17:33 -0400
Subject: [PATCH] refactor: renderTemplate to async function, updated call to
 transitions API to wait until template is fully rendered before transitioning

---
 public/src/ajaxify.js             | 52 ++++++++++++++++---------------
 public/src/modules/transitions.js |  8 ++---
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/public/src/ajaxify.js b/public/src/ajaxify.js
index 0635adbab3..fdcc5349d4 100644
--- a/public/src/ajaxify.js
+++ b/public/src/ajaxify.js
@@ -68,7 +68,6 @@ ajaxify.widgets = { render: render };
 		}
 
 		previousBodyClass = ajaxify.data.bodyClass;
-		transitions.start();
 
 		ajaxify.loadData(url, function (err, data) {
 			if (!err || (
@@ -84,8 +83,12 @@ ajaxify.widgets = { render: render };
 			}
 
 			retry = true;
-
-			renderTemplate(url, data.templateToRender || data.template.name, data, callback);
+			transitions.start(async () => {
+				await renderTemplate(url, data.templateToRender || data.template.name, data);
+				if (typeof callback === 'function') {
+					callback();
+				}
+			});
 		});
 
 		return true;
@@ -158,8 +161,12 @@ ajaxify.widgets = { render: render };
 					data.responseJSON.config = config;
 				}
 
-				transitions.start();
-				return renderTemplate(url, status.toString(), data.responseJSON || {}, callback);
+				transitions.start(async () => {
+					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]]');
@@ -187,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) {
-			Benchpress.render(tpl_url, data)
-				.then(rendered => translator.translate(rendered))
-				.then(function (translated) {
-					translated = translator.unescape(translated);
-					$('body').removeClass(previousBodyClass).addClass(data.bodyClass);
-					$('#content').html(translated);
+		const [translator, Benchpress] = await app.require(['translator', 'benchpressjs']);
+		return Benchpress.render(tpl_url, data)
+			.then(rendered => translator.translate(rendered))
+			.then(function (translated) {
+				console.log('got here');
+				translated = translator.unescape(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') {
-						callback();
-					}
-
-					transitions.end();
-
-					// Only executed on ajaxify. Otherwise these'd be in ajaxify.end()
-					updateTitle(data.title);
-					updateTags();
-				});
-		});
+				// Only executed on ajaxify. Otherwise these'd be in ajaxify.end()
+				updateTitle(data.title);
+				updateTags();
+			});
 	}
 
 	function updateTitle(title) {
diff --git a/public/src/modules/transitions.js b/public/src/modules/transitions.js
index 81e58e66a9..cc9441f06b 100644
--- a/public/src/modules/transitions.js
+++ b/public/src/modules/transitions.js
@@ -1,6 +1,6 @@
 let active = false;
 
-export function start() {
+export async function start(process) {
 	if (active) {
 		return;
 	}
@@ -9,13 +9,11 @@ export function start() {
 
 	if (!document.startViewTransition) {
 		$('#footer, #content').removeClass('hide').addClass('ajaxifying');
+		await process();
 		return;
 	}
 
-	const { ready } = document.startViewTransition();
-	ready.then(() => {
-		console.log('ready!');
-	});
+	document.startViewTransition(process);
 }
 
 export function end() {