perf(editor): Use virtual scrolling in RunDataJson.vue (#10838)

packages/editor-ui/src/components/RunDataJson.vue

@@ -14,6 +14,7 @@ import { nonExistingJsonPath } from '@/constants';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import TextWithHighlights from './TextWithHighlights.vue';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { useElementSize } from '@vueuse/core';
 
 const LazyRunDataJsonActions = defineAsyncComponent(
 	async () => await import('@/components/RunDataJsonActions.vue'),
@@ -45,6 +46,9 @@ const telemetry = useTelemetry();
 const selectedJsonPath = ref(nonExistingJsonPath);
 const draggingPath = ref<null | string>(null);
 const displayMode = ref('json');
+const jsonDataContainer = ref(null);
+
+const { height } = useElementSize(jsonDataContainer);
 
 const jsonData = computed(() => executionDataToJson(props.inputData));
 
@@ -110,7 +114,7 @@ const getListItemName = (path: string) => {
 </script>
 
 <template>
-	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
+	<div ref="jsonDataContainer" :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
 		<Suspense>
 			<LazyRunDataJsonActions
 				v-if="!editMode.enabled"
@@ -141,6 +145,8 @@ const getListItemName = (path: string) => {
 				root-path=""
 				selectable-type="single"
 				class="json-data"
+				:virtual="true"
+				:height="height"
 				@update:selected-value="selectedJsonPath = $event"
 			>
 				<template #renderNodeKey="{ node }">
@@ -192,11 +198,10 @@ const getListItemName = (path: string) => {
 	left: 0;
 	padding-left: var(--spacing-s);
 	right: 0;
-	overflow-y: auto;
+	overflow-y: hidden;
 	line-height: 1.5;
 	word-break: normal;
 	height: 100%;
-	padding-bottom: var(--spacing-3xl);
 
 	&:hover {
 		/* Shows .actionsGroup element from <run-data-json-actions /> child component */
@@ -299,4 +304,8 @@ const getListItemName = (path: string) => {
 .vjs-tree .vjs-tree__content.has-line {
 	border-left: 1px dotted var(--color-json-line);
 }
+
+.vjs-tree .vjs-tree-list-holder-inner {
+	padding-bottom: var(--spacing-3xl);
+}
 </style>

packages/editor-ui/src/components/__tests__/RunDataJson.test.ts

@@ -2,6 +2,22 @@ import { createTestingPinia } from '@pinia/testing';
 import { screen, cleanup } from '@testing-library/vue';
 import RunDataJson from '@/components/RunDataJson.vue';
 import { createComponentRenderer } from '@/__tests__/render';
+import { useElementSize } from '@vueuse/core'; // Import the composable to mock
+
+vi.mock('@vueuse/core', async () => {
+	// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+	const originalModule = await vi.importActual<typeof import('@vueuse/core')>('@vueuse/core');
+
+	return {
+		...originalModule, // Keep all original exports
+		useElementSize: vi.fn(), // Mock useElementSize
+	};
+});
+
+(useElementSize as jest.Mock).mockReturnValue({
+	height: 500, // Mocked height value
+	width: 300, // Mocked width value
+});
 
 const renderComponent = createComponentRenderer(RunDataJson, {
 	props: {
@@ -34,18 +50,6 @@ const renderComponent = createComponentRenderer(RunDataJson, {
 			disabled: false,
 		},
 	},
-	global: {
-		mocks: {
-			$locale: {
-				baseText() {
-					return '';
-				},
-			},
-			$store: {
-				getters: {},
-			},
-		},
-	},
 });
 
 describe('RunDataJson.vue', () => {

packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap

@@ -11,7 +11,19 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
     >
       
       <div
-        class="vjs-tree json-data"
+        class="vjs-tree is-virtual json-data"
+      >
+        <div
+          class="vjs-tree-list"
+          style="height: 500px;"
+        >
+          <div
+            class="vjs-tree-list-holder"
+            style="height: 340px;"
+          >
+            <div
+              class="vjs-tree-list-holder-inner"
+              style="transform: translateY(0px);"
             >
               
               <div
@@ -828,6 +840,9 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               </div>
               
             </div>
+          </div>
+        </div>
+      </div>
       
       <!--teleport start-->
       <!--teleport end-->