perf(SchemaTree): batch preloaded data dispatch

Author: ariser

src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -3,10 +3,10 @@ import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
 
-import {setCurrentSchemaPath, getSchema, preloadSchema} from '../../../../store/reducers/schema';
+import {setCurrentSchemaPath, getSchema, preloadSchemas} from '../../../../store/reducers/schema';
 import {getDescribe} from '../../../../store/reducers/describe';
 import {getSchemaAcl} from '../../../../store/reducers/schemaAcl';
-import type {EPathType} from '../../../../types/api/schema';
+import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 
 import {mapPathTypeToNavigationTreeType} from '../../utils/schema';
 import {getActions} from '../../utils/schemaActions';
@@ -29,15 +29,15 @@ export function SchemaTree(props: SchemaTreeProps) {
             .then((data) => {
                 const {PathDescription: {Children = []} = {}} = data;
 
-                dispatch(preloadSchema(path, data));
+                const preloadedData: Record<string, TEvDescribeSchemeResult> = {
+                    [path]: data
+                };
 
-                return Children.map((childData) => {
+                const childItems = Children.map((childData) => {
                     const {Name = '', PathType, PathSubType} = childData;
 
                     // not full data, but it contains PathType, which ensures seamless switch between nodes
-                    dispatch(
-                        preloadSchema(`${path}/${Name}`, {PathDescription: {Self: childData}}),
-                    );
+                    preloadedData[`${path}/${Name}`] = {PathDescription: {Self: childData}};
 
                     return {
                         name: Name,
@@ -47,6 +47,10 @@ export function SchemaTree(props: SchemaTreeProps) {
                         expandable: true,
                     };
                 });
+
+                dispatch(preloadSchemas(preloadedData));
+
+                return childItems;
             });
 
     const handleActivePathUpdate = (activePath: string) => {

src/store/reducers/schema.js

@@ -2,7 +2,7 @@ import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 
 const FETCH_SCHEMA = createRequestActionTypes('schema', 'FETCH_SCHEMA');
-const PRELOAD_SCHEMA = 'schema/PRELOAD_SCHEMA';
+const PRELOAD_SCHEMAS = 'schema/PRELOAD_SCHEMAS';
 const SET_SCHEMA = 'schema/SET_SCHEMA';
 const SET_SHOW_PREVIEW = 'schema/SET_SHOW_PREVIEW';
 const ENABLE_AUTOREFRESH = 'schema/ENABLE_AUTOREFRESH';
@@ -54,16 +54,13 @@ const schema = (state = initialState, action) => {
                 loading: false,
             };
         }
-        case PRELOAD_SCHEMA: {
-            if (state.data[action.path]) {
-                return state;
-            }
-
+        case PRELOAD_SCHEMAS: {
             return {
                 ...state,
                 data: {
+                    // we don't want to overwrite existing paths
+                    ...action.data,
                     ...state.data,
-                    [action.path]: action.data,
                 },
             };
         }
@@ -133,11 +130,11 @@ export function setShowPreview(value) {
     };
 }
 
-// only stores the passed data if the path doesn't exist yet
-export function preloadSchema(path, data) {
+// only stores data for paths that are not in the store yet
+// existing paths are ignored
+export function preloadSchemas(data) {
     return {
-        type: PRELOAD_SCHEMA,
-        path,
+        type: PRELOAD_SCHEMAS,
         data,
     };
 }