Hmm.

Author: drgrice1

htdocs/js/MathJaxConfig/mathjax-config.js

@@ -1,4 +1,6 @@
 if (!window.MathJax) {
+	const problems = [];
+
 	window.MathJax = {
 		tex: { packages: { '[+]': webworkConfig?.showMathJaxErrors ? [] : ['noerrors'] } },
 		loader: {
@@ -106,9 +108,12 @@ if (!window.MathJax) {
 			},
 			pageReady() {
 				return MathJax.startup.defaultPageReady().then(() => {
-					for (const problemBody of document.querySelectorAll('.problem-content')) {
-						problemBody.style.visibility = '';
+					for (const [problemContent, loaderOverlay, resizeObserver] of problems) {
+						resizeObserver.disconnect();
+						loaderOverlay.remove();
+						problemContent.style.visibility = '';
 					}
+					problems.length = 0;
 				});
 			}
 		},
@@ -142,7 +147,45 @@ if (!window.MathJax) {
 		}
 	};
 
-	for (const problemBody of document.querySelectorAll('.problem-content')) {
-		problemBody.style.visibility = 'hidden';
+	for (const problemContent of document.querySelectorAll('.problem-content')) {
+		problemContent.style.visibility = 'hidden';
+		const loaderOverlay = document.createElement('div');
+		loaderOverlay.classList.add('problem-content');
+		const bodyRectangle = problemContent.getBoundingClientRect();
+		loaderOverlay.style.position = 'absolute';
+		loaderOverlay.style.top = `${bodyRectangle.y}px`;
+		loaderOverlay.style.left = `${bodyRectangle.x}px`;
+		loaderOverlay.style.width = `${bodyRectangle.width}px`;
+		loaderOverlay.style.height = `${bodyRectangle.height}px`;
+		loaderOverlay.style.overflow = 'clip';
+		loaderOverlay.style.transition = 'height 0.3s ease';
+
+		loaderOverlay.classList.add(
+			'd-flex',
+			'flex-column',
+			'justify-content-start',
+			'align-items-center',
+			'text-dark'
+		);
+
+		const loaderText = document.createElement('div');
+		loaderText.textContent = 'Loading...';
+		loaderText.classList.add('fs-1');
+
+		const loaderIcon = document.createElement('i');
+		loaderIcon.classList.add('fa-solid', 'fa-spinner', 'fa-spin', 'fa-2x');
+
+		loaderOverlay.append(loaderText, loaderIcon);
+
+		problemContent.after(loaderOverlay);
+		const resizeObserver = new ResizeObserver(() => {
+			const bodyRectangle = problemContent.getBoundingClientRect();
+			loaderOverlay.style.top = `${bodyRectangle.top}px`;
+			loaderOverlay.style.left = `${bodyRectangle.left}px`;
+			loaderOverlay.style.width = `${bodyRectangle.width}px`;
+			loaderOverlay.style.height = `${bodyRectangle.height}px`;
+		});
+		resizeObserver.observe(problemContent);
+		problems.push([problemContent, loaderOverlay, resizeObserver]);
 	}
 }