fix(Describe): render loader on path change

Author: artemmufazalov

src/containers/Tenant/Diagnostics/Describe/Describe.tsx

@@ -9,7 +9,11 @@ import {Loader} from '@gravity-ui/uikit';
 
 import {prepareQueryError} from '../../../../utils/query';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
-import {getDescribe} from '../../../../store/reducers/describe';
+import {
+    getDescribe,
+    setDataWasNotLoaded,
+    setCurrentDescribePath,
+} from '../../../../store/reducers/describe';
 
 import './Describe.scss';
 
@@ -30,11 +34,19 @@ const Describe = ({tenant}: IDescribeProps) => {
 
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
 
-    const fetchData = useCallback(() => {
-        const path = currentSchemaPath || tenant;
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
 
-        dispatch(getDescribe({path}));
-    }, [currentSchemaPath, tenant, dispatch]);
+            const path = currentSchemaPath || tenant;
+
+            dispatch(setCurrentDescribePath(path));
+            dispatch(getDescribe({path}));
+        },
+        [currentSchemaPath, tenant, dispatch],
+    );
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 

src/store/reducers/describe.ts

@@ -2,24 +2,23 @@ import {createSelector, Selector} from 'reselect';
 import {Reducer} from 'redux';
 
 import '../../services/api';
-import {TEvDescribeSchemeResult} from '../../types/api/schema';
 import {IConsumer} from '../../types/api/consumers';
-import {IDescribeRootStateSlice, IDescribeState} from '../../types/store/describe';
-import {IResponseError} from '../../types/api/error';
-import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
+import {IDescribeRootStateSlice, IDescribeState, IDescribeAction} from '../../types/store/describe';
+import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+export const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+const SET_CURRENT_DESCRIBE_PATH = 'describe/SET_CURRENT_DESCRIBE_PATH';
+const SET_DATA_WAS_NOT_LOADED = 'describe/SET_DATA_WAS_NOT_LOADED';
 
 const initialState = {
     loading: false,
     wasLoaded: false,
     data: {},
+    currentDescribe: undefined,
+    currentDescribePath: undefined,
 };
 
-const describe: Reducer<
-    IDescribeState,
-    ApiRequestAction<typeof FETCH_DESCRIBE, TEvDescribeSchemeResult, IResponseError>
-> = (state = initialState, action) => {
+const describe: Reducer<IDescribeState, IDescribeAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_DESCRIBE.REQUEST: {
             return {
@@ -28,53 +27,79 @@ const describe: Reducer<
             };
         }
         case FETCH_DESCRIBE.SUCCESS: {
-            let newData;
+            const data = action.data;
 
-            if (action.data.Path) {
+            const isCurrentDescribePath = data.Path === state.currentDescribePath;
+
+            let newData = state.data;
+
+            if (data.Path) {
                 newData = JSON.parse(JSON.stringify(state.data));
-                newData[action.data.Path] = action.data;
-            } else {
-                newData = state.data;
+                newData[data.Path] = data;
+            }
+
+            if (!isCurrentDescribePath) {
+                return {
+                    ...state,
+                    data: newData,
+                };
             }
 
             return {
                 ...state,
                 data: newData,
-                currentDescribe: action.data,
+                currentDescribe: data,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
             };
         }
+
         case FETCH_DESCRIBE.FAILURE: {
             return {
                 ...state,
                 error: action.error,
                 loading: false,
-                wasLoaded: true,
+            };
+        }
+        case SET_CURRENT_DESCRIBE_PATH: {
+            return {
+                ...state,
+                currentDescribePath: action.data,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
             };
         }
         default:
             return state;
     }
 };
 
+export const setCurrentDescribePath = (path: string) => {
+    return {
+        type: SET_CURRENT_DESCRIBE_PATH,
+        data: path,
+    } as const;
+};
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
 // Consumers selectors
-const selectConsumersNames: Selector<IDescribeRootStateSlice, string[] | undefined, [string]> = (
-    state,
-    path,
-) => state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules;
-
-export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[]> = createSelector(
-    selectConsumersNames,
-    (names = []) => {
-        const consumers = names.map((name) => {
-            return {name};
-        });
-
-        return consumers;
-    },
-);
+const selectConsumersNames = (state: IDescribeRootStateSlice, path: string | undefined) =>
+    path
+        ? state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules
+        : undefined;
+
+export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[], [string | undefined]> =
+    createSelector(selectConsumersNames, (names = []) => names.map((name) => ({name})));
 
 export function getDescribe({path}: {path: string}) {
     return createApiRequest({

src/types/store/describe.ts

@@ -1,14 +1,34 @@
+import {
+    FETCH_DESCRIBE,
+    setCurrentDescribePath,
+    setDataWasNotLoaded,
+} from '../../store/reducers/describe';
+import {ApiRequestAction} from '../../store/utils';
 import {IResponseError} from '../api/error';
 import {TEvDescribeSchemeResult} from '../api/schema';
 
+export type IDescribeData = Record<string, TEvDescribeSchemeResult>;
+
 export interface IDescribeState {
     loading: boolean;
     wasLoaded: boolean;
-    data: Record<string, TEvDescribeSchemeResult>;
+    data: IDescribeData;
     currentDescribe?: TEvDescribeSchemeResult;
+    currentDescribePath?: string;
     error?: IResponseError;
 }
 
+type IDescribeApiRequestAction = ApiRequestAction<
+    typeof FETCH_DESCRIBE,
+    TEvDescribeSchemeResult,
+    IResponseError
+>;
+
+export type IDescribeAction =
+    | IDescribeApiRequestAction
+    | ReturnType<typeof setCurrentDescribePath>
+    | ReturnType<typeof setDataWasNotLoaded>;
+
 export interface IDescribeRootStateSlice {
     describe: IDescribeState;
 }