From 10ec99c7f5280632a058493dbb6594bfba082f5e Mon Sep 17 00:00:00 2001
From: Jextic <johnny.k.huynh01@sjsu.edu>
Date: Sun, 1 Nov 2026 15:33:00 -0800
Subject: [PATCH 1/2] Canvas and overlay parentNode synchronize check BEFORE
 updating position

---
 src/core/loading.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/core/loading.js b/src/core/loading.js
index 96f27bf206..c7bc02394c 100644
--- a/src/core/loading.js
+++ b/src/core/loading.js
@@ -96,6 +96,9 @@ function _createLoadingOverlay(pInst) {
 
       const currentCanvas = pInst.canvas?.elt || pInst.canvas;
       if (currentCanvas) {
+        if (currentCanvas.parentNode && overlay.parentNode !== currentCanvas.parentNode) {
+          currentCanvas.parentNode.insertBefore(overlay, currentCanvas.nextSibling);
+        }
         _positionCanvas(overlay, currentCanvas);
       }
       
@@ -124,13 +127,13 @@ function _createLoadingOverlay(pInst) {
 
     animate();
   }
-
-  // Positions the loading indicator to overlay the sketch canvas
-  _positionCanvas(overlay, actualCanvas);
-
+  
   if (overlay.parentNode !== actualCanvas.parentNode) {
     actualCanvas.parentNode.insertBefore(overlay, actualCanvas.nextSibling);
   }
+
+  // Positions the loading indicator to overlay the sketch canvas
+  _positionCanvas(overlay, actualCanvas);
 }
 
 /**

From 441e623c8e80f2cb13cd0b8e2652495d1f44c88c Mon Sep 17 00:00:00 2001
From: Jextic <johnny.k.huynh01@sjsu.edu>
Date: Mon, 2 Nov 2026 11:13:53 -0800
Subject: [PATCH 2/2] loading overlay dynamic parenting test case

---
 test/unit/core/loading.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/test/unit/core/loading.js b/test/unit/core/loading.js
index 1dade1628b..67247d7391 100644
--- a/test/unit/core/loading.js
+++ b/test/unit/core/loading.js
@@ -319,6 +319,37 @@ suite('Loading indicator', function () {
     }
   });
 
+  test('parents loading overlay again when canvas parent changes', function () {
+    let nextFrame;
+    const requestAnimationFrame = vi
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation(callback => {
+        nextFrame = callback;
+        return 1;
+      });
+    const newContainer = document.createElement('div');
+    const p = {
+      canvas,
+      _isSketchLoading: true
+    };
+
+    document.body.appendChild(newContainer);
+
+    try {
+      callCreateCanvas(p);
+      newContainer.appendChild(canvas);
+
+      nextFrame();
+
+      assert.strictEqual(p._loadingOverlay.parentNode, newContainer);
+      assert.strictEqual(p._loadingOverlay.previousSibling, canvas);
+    } finally {
+      lifecycles.postsetup.call(p);
+      newContainer.remove();
+      requestAnimationFrame.mockRestore();
+    }
+  });
+
   test('test multiple indicators for multiple instances', async function () {
     const instance1 = document.createElement('div');
     const instance2 = document.createElement('div');