fix(Versions): loading state (#2050)

Author: Raubzeug

src/containers/Cluster/Cluster.scss

@@ -3,8 +3,10 @@
 .ydb-cluster {
     position: relative;
 
+    display: flex;
     overflow: auto;
     flex-grow: 1;
+    flex-direction: column;
 
     height: 100%;
     padding: 0 20px;
@@ -46,14 +48,14 @@
     &__sticky-wrapper {
         position: sticky;
         z-index: 4;
-        top: 66px;
+        top: 74px;
         left: 0;
     }
 
     &__auto-refresh-control {
         float: right;
 
-        margin-top: -46px;
+        margin-top: -54px;
 
         background-color: var(--g-color-base-background);
     }

src/containers/Cluster/Cluster.tsx

@@ -29,7 +29,7 @@ import {Nodes} from '../Nodes/Nodes';
 import {PaginatedStorage} from '../Storage/PaginatedStorage';
 import {TabletsTable} from '../Tablets/TabletsTable';
 import {Tenants} from '../Tenants/Tenants';
-import {Versions} from '../Versions/Versions';
+import {VersionsContainer} from '../Versions/Versions';
 
 import {ClusterDashboard} from './ClusterDashboard/ClusterDashboard';
 import {ClusterInfo} from './ClusterInfo/ClusterInfo';
@@ -193,7 +193,7 @@ export function Cluster({
                         getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions)).pathname
                     }
                 >
-                    {cluster && <Versions cluster={cluster} />}
+                    <VersionsContainer cluster={cluster} loading={infoLoading} />
                 </Route>
                 <Route
                     render={() => (

src/containers/Versions/Versions.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 
 import {Checkbox, RadioButton} from '@gravity-ui/uikit';
 
-import {Loader} from '../../components/Loader';
+import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
 import {nodesApi} from '../../store/reducers/nodes/nodes';
+import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {TClusterInfo} from '../../types/api/cluster';
+import type {VersionToColorMap, VersionValue} from '../../types/versions';
 import {cn} from '../../utils/cn';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import {VersionsBar} from '../Cluster/VersionsBar/VersionsBar';
@@ -19,21 +21,39 @@ import './Versions.scss';
 
 const b = cn('ydb-versions');
 
-interface VersionsProps {
-    cluster: TClusterInfo;
+interface VersionsContainerProps {
+    cluster?: TClusterInfo;
+    loading?: boolean;
 }
 
-export const Versions = ({cluster}: VersionsProps) => {
+export function VersionsContainer({cluster, loading}: VersionsContainerProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const versionToColor = useVersionToColorMap();
-
-    const versionsValues = useGetVersionValues(cluster, versionToColor);
     const {currentData, isLoading: isNodesLoading} = nodesApi.useGetNodesQuery(
         {tablets: false, fieldsRequired: ['SystemState', 'SubDomainKey']},
         {pollingInterval: autoRefreshInterval},
     );
+    const versionToColor = useVersionToColorMap();
+
+    const versionsValues = useGetVersionValues({cluster, versionToColor, clusterLoading: loading});
+
+    return (
+        <LoaderWrapper loading={loading || isNodesLoading}>
+            <Versions
+                versionsValues={versionsValues}
+                nodes={currentData?.Nodes}
+                versionToColor={versionToColor}
+            />
+        </LoaderWrapper>
+    );
+}
 
-    const nodes = currentData?.Nodes;
+interface VersionsProps {
+    nodes?: NodesPreparedEntity[];
+    versionsValues: VersionValue[];
+    versionToColor?: VersionToColorMap;
+}
+
+function Versions({versionsValues, nodes, versionToColor}: VersionsProps) {
     const [groupByValue, setGroupByValue] = React.useState<GroupByValue>(GroupByValue.VERSION);
     const [expanded, setExpanded] = React.useState(false);
 
@@ -71,10 +91,6 @@ export const Versions = ({cluster}: VersionsProps) => {
         );
     };
 
-    if (isNodesLoading) {
-        return <Loader />;
-    }
-
     const tenantNodes = getGroupedTenantNodes(nodes, versionToColor, groupByValue);
     const storageNodes = getGroupedStorageNodes(nodes, versionToColor);
     const otherNodes = getOtherNodes(nodes, versionToColor);
@@ -146,4 +162,4 @@ export const Versions = ({cluster}: VersionsProps) => {
             {otherNodesContent}
         </div>
     );
-};
+}

src/containers/Versions/utils.ts

@@ -16,9 +16,19 @@ import {
     parseVersionsToVersionToColorMap,
 } from '../../utils/versions';
 
-export const useGetVersionValues = (cluster?: TClusterInfo, versionToColor?: VersionToColorMap) => {
+interface UseGetVersionValuesProps {
+    cluster?: TClusterInfo;
+    versionToColor?: VersionToColorMap;
+    clusterLoading?: boolean;
+}
+
+export const useGetVersionValues = ({
+    cluster,
+    versionToColor,
+    clusterLoading,
+}: UseGetVersionValuesProps) => {
     const {currentData} = nodesApi.useGetNodesQuery(
-        isClusterInfoV2(cluster)
+        isClusterInfoV2(cluster) || clusterLoading
             ? skipToken
             : {
                   tablets: false,