This is an automated email from the ASF dual-hosted git repository. rahulvats pushed a commit to branch v3-2-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit fa97fcdc0fb5138bb821a2537dee6c4874c67117 Author: Pierre Jeambrun <[email protected]> AuthorDate: Fri Mar 27 08:47:10 2026 +0100 UI: Fix RenderedJsonField flickering when collapsed (#64261) Hide the editor until the fold action completes to prevent the expanded-to-collapsed visual flash in table cells. Co-authored-by: Rahul Vats <[email protected]> (cherry picked from commit 2eaa200a1824c3a07b75efa610d4a07a9d05659a) --- .../ui/src/components/RenderedJsonField.tsx | 25 ++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx index 66914f995de..a289cdae892 100644 --- a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx +++ b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx @@ -36,8 +36,9 @@ const RenderedJsonField = ({ collapsed = false, content, enableClipboard = true, const contentFormatted = JSON.stringify(content, undefined, 2); const { colorMode } = useColorMode(); const lineCount = contentFormatted.split("\n").length; - const initialHeight = Math.min(Math.max(lineCount * 19 + 10, MIN_HEIGHT), MAX_HEIGHT); - const [editorHeight, setEditorHeight] = useState(initialHeight); + const expandedHeight = Math.min(Math.max(lineCount * 19 + 10, MIN_HEIGHT), MAX_HEIGHT); + const [editorHeight, setEditorHeight] = useState(collapsed ? MIN_HEIGHT : expandedHeight); + const [isReady, setIsReady] = useState(!collapsed); const theme = colorMode === "dark" ? "vs-dark" : "vs-light"; const handleMount: OnMount = useCallback( @@ -49,14 +50,30 @@ const RenderedJsonField = ({ collapsed = false, content, enableClipboard = true, }); if (collapsed) { - void editorInstance.getAction("editor.foldAll")?.run(); + const action = editorInstance.getAction("editor.foldAll"); + + if (action) { + void action.run().then(() => { + setIsReady(true); + }); + } else { + setIsReady(true); + } } }, [collapsed], ); return ( - <Flex flex={1} gap={2} minW={200} {...rest}> + <Flex + flex={1} + gap={2} + minW={200} + // Hide the editor until it's ready to prevent a flickering effect when collapsing. + // The editor will be hidden until the fold action is completed (if collapsed) or immediately if not collapsed. + style={isReady ? undefined : { height: "0px", overflow: "hidden" }} + {...rest} + > <Editor height={`${editorHeight}px`} language="json"
