diff --git a/frontend/apps/artcraft/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx b/frontend/apps/artcraft/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx index fadfa5b6e7..e0020387d7 100644 --- a/frontend/apps/artcraft/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx +++ b/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(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 | null }); + renderRef.current.count += 1; + const traced = { isOpen, uploaderStateStatus: uploaderState.status, isCharacter }; + const diff: Record = {}; + if (renderRef.current.prev) { + for (const k of Object.keys(traced) as Array) { + 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; diff --git a/frontend/apps/artcraft/app/src/pages/PageScene/PageEditor.tsx b/frontend/apps/artcraft/app/src/pages/PageScene/PageEditor.tsx index 0227f8e9db..0b74ca0706 100644 --- a/frontend/apps/artcraft/app/src/pages/PageScene/PageEditor.tsx +++ b/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(); diff --git a/frontend/apps/artcraft/app/src/pages/PageScene/comps/Controls3D/Controls3D.tsx b/frontend/apps/artcraft/app/src/pages/PageScene/comps/Controls3D/Controls3D.tsx index 6cb4b81db9..2bbd3acf77 100644 --- a/frontend/apps/artcraft/app/src/pages/PageScene/comps/Controls3D/Controls3D.tsx +++ b/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 | null }); + renderRef.current.count += 1; + const traced = { + assetModalVisible, + selectedMode, + transformSpace, + outlinerItemCount, + upload3DIsShowing, + uploadImageIsShowing, + uploadSplatIsShowing, + showEmptySceneTooltip, + isAddAssetPopoverOpen, + isSettingsModalOpen, + }; + const diff: Record = {}; + if (renderRef.current.prev) { + for (const k of Object.keys(traced) as Array) { + 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 &&