TEMP debug: render-trace UploadModal3D / Controls3D / PageEditor

frontend/apps/artcraft/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Checkbox } from "@storyteller/ui-checkbox";
 import { LoadingDots } from "@storyteller/ui-loading";
 import { Modal } from "@storyteller/ui-modal";
@@ -39,6 +39,25 @@ export function UploadModal3D(props: Props) {
     useState<UploaderState>(initialUploaderState);
   const [isCharacter, setIsCharacter] = useState(false);
 
+  // TEMP debug: render counter — see why this re-renders mid-click.
+  const renderRef = useRef({ count: 0, prev: null as Record<string, unknown> | null });
+  renderRef.current.count += 1;
+  const traced = { isOpen, uploaderStateStatus: uploaderState.status, isCharacter };
+  const diff: Record<string, [unknown, unknown]> = {};
+  if (renderRef.current.prev) {
+    for (const k of Object.keys(traced) as Array<keyof typeof traced>) {
+      if (renderRef.current.prev[k] !== traced[k]) {
+        diff[k] = [renderRef.current.prev[k], traced[k]];
+      }
+    }
+  }
+  // eslint-disable-next-line no-console
+  console.debug(
+    `[render-trace] UploadModal3D #${renderRef.current.count}`,
+    Object.keys(diff).length ? { diff } : { same: traced },
+  );
+  renderRef.current.prev = traced;
+
   const selectedCategory = isCharacter
     ? FilterEngineCategories.CHARACTER
     : FilterEngineCategories.OBJECT;

frontend/apps/artcraft/app/src/pages/PageScene/PageEditor.tsx

@@ -83,6 +83,12 @@ export const PageEditor = () => {
   const { triggerRecheck } = useLoginModalStore();
   const { status } = authentication;
 
+  // TEMP debug: render counter — see whether PageEditor re-renders mid-click.
+  const _peRenderCount = useRef(0);
+  _peRenderCount.current += 1;
+  // eslint-disable-next-line no-console
+  console.debug(`[render-trace] PageEditor #${_peRenderCount.current}`);
+
   useEffect(() => {
     if (status.value === AUTH_STATUS.LOGGED_OUT) {
       triggerRecheck();

frontend/apps/artcraft/app/src/pages/PageScene/comps/Controls3D/Controls3D.tsx

@@ -13,7 +13,7 @@ import { Button } from "@storyteller/ui-button";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { SettingsModal } from "@storyteller/ui-settings-modal";
 import { EngineContext } from "../../contexts/EngineContext";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { useShallow } from "zustand/shallow";
 import { usePageSceneStore } from "../../PageSceneStore";
 import { useTabStore } from "~/pages/Stores/TabState";
@@ -68,6 +68,36 @@ export const Controls3D = () => {
 
   const outlinerItemCount = usePageSceneStore((s) => s.outlinerItems.length);
 
+  // TEMP debug: render counter — see why this re-renders mid-click.
+  const renderRef = useRef({ count: 0, prev: null as Record<string, unknown> | null });
+  renderRef.current.count += 1;
+  const traced = {
+    assetModalVisible,
+    selectedMode,
+    transformSpace,
+    outlinerItemCount,
+    upload3DIsShowing,
+    uploadImageIsShowing,
+    uploadSplatIsShowing,
+    showEmptySceneTooltip,
+    isAddAssetPopoverOpen,
+    isSettingsModalOpen,
+  };
+  const diff: Record<string, [unknown, unknown]> = {};
+  if (renderRef.current.prev) {
+    for (const k of Object.keys(traced) as Array<keyof typeof traced>) {
+      if (renderRef.current.prev[k] !== traced[k]) {
+        diff[k] = [renderRef.current.prev[k], traced[k]];
+      }
+    }
+  }
+  // eslint-disable-next-line no-console
+  console.debug(
+    `[render-trace] Controls3D #${renderRef.current.count}`,
+    Object.keys(diff).length ? { diff } : { same: traced },
+  );
+  renderRef.current.prev = traced;
+
   useEffect(() => {
     const isSceneEmpty =
       outlinerItemCount === 0 &&