This is an automated email from the ASF dual-hosted git repository.
eladkal pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 2eaa200a182 UI: Fix RenderedJsonField flickering when collapsed
(#64261)
2eaa200a182 is described below
commit 2eaa200a1824c3a07b75efa610d4a07a9d05659a
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]>
---
.../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"
