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,34 @@ 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.animate([{ opacity: 1 }, { opacity: 0.2 }, { opacity: 1 }], {
+			duration: 1000,
+			iterations: Infinity,
+			easing: 'ease-in-out'
+		});
+		loaderOverlay.style.cursor = 'wait';
+
+		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]);
 	}
 }