feat(Storage): smoother loading state for storage table

Author: ariser

src/components/TableSkeleton/TableSkeleton.scss

@@ -0,0 +1,38 @@
+.table-skeleton {
+    width: 100%;
+
+    &__row {
+        display: flex;
+        align-items: center;
+
+        height: var(--data-table-row-height);
+
+        .yc-skeleton {
+            height: var(--yc-text-body2-line-height);
+        }
+    }
+
+    &__col-1 {
+        width: 10%;
+        margin-right: 5%;
+    }
+
+    &__col-2 {
+        width: 7%;
+        margin-right: 5%;
+    }
+
+    &__col-3,
+    &__col-4 {
+        width: 5%;
+        margin-right: 5%;
+    }
+
+    &__col-5 {
+        width: 20%;
+    }
+
+    &__col-full {
+        width: 100%;
+    }
+}

src/components/TableSkeleton/TableSkeleton.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import block from 'bem-cn-lite';
+import { Skeleton } from '@yandex-cloud/uikit';
+
+import './TableSkeleton.scss';
+
+const b = block('table-skeleton');
+
+interface TableSkeletonProps {
+    className?: string;
+    rows?: number;
+}
+
+export const TableSkeleton: FC<TableSkeletonProps> = ({ rows = 2, className }) => (
+    <div className={b(null, className)}>
+        <div className={b('row')}>
+            <Skeleton className={b('col-1')} />
+            <Skeleton className={b('col-2')} />
+            <Skeleton className={b('col-3')} />
+            <Skeleton className={b('col-4')} />
+            <Skeleton className={b('col-5')} />
+        </div>
+        {[...new Array(rows)].map((_, index) => (
+            <div className={b('row')} key={`skeleton-row-${index}`}>
+                <Skeleton className={b('col-full')} />
+            </div>
+        ))}
+    </div>
+);

src/containers/Storage/Storage.js

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
-import {Loader, RadioButton, Label} from '@yandex-cloud/uikit';
+import {RadioButton, Label} from '@yandex-cloud/uikit';
 
 import StorageFilter from './StorageFilter/StorageFilter';
 import {AutoFetcher} from '../../utils/autofetcher';
+import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 
 import {
     getStorageInfo,
@@ -68,17 +69,14 @@ class Storage extends React.Component {
             storageType,
             setHeader,
             getNodesList,
-            getStorageInfo,
         } = this.props;
 
         this.autofetcher = new AutoFetcher();
         getNodesList();
         if (tenant || nodeId) {
             setVisibleEntities(VisibleEntities.All);
-            getStorageInfo({
-                tenant,
+            this.getStorageInfo({
                 filter: FILTER_OPTIONS.All,
-                nodeId,
                 type: storageType,
             });
         } else {
@@ -88,16 +86,12 @@ class Storage extends React.Component {
                     link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.storage.id}),
                 },
             ]);
-            getStorageInfo({
-                tenant,
-                nodeId,
+            this.getStorageInfo({
                 filter: FILTER_OPTIONS.Missing,
                 type: storageType,
             });
             this.autofetcher.fetch(() =>
-                getStorageInfo({
-                    tenant,
-                    nodeId,
+                this.getStorageInfo({
                     filter: FILTER_OPTIONS.Missing,
                     type: storageType,
                 }),
@@ -107,30 +101,23 @@ class Storage extends React.Component {
 
     componentDidUpdate(prevProps) {
         const {
-            tenant,
             visibleEntities,
-            getStorageInfo,
-            nodeId,
             storageType,
             autorefresh,
             database,
         } = this.props;
 
         const startFetch = () => {
-            getStorageInfo({
-                tenant,
+            this.getStorageInfo({
                 filter: FILTER_OPTIONS[visibleEntities],
-                nodeId,
                 type: storageType,
             });
 
             this.autofetcher.stop();
             this.autofetcher.start();
             this.autofetcher.fetch(() =>
-                getStorageInfo({
-                    tenant,
+                this.getStorageInfo({
                     filter: FILTER_OPTIONS[visibleEntities],
-                    nodeId,
                     type: storageType,
                 }),
             );
@@ -157,11 +144,25 @@ class Storage extends React.Component {
         this.props.setInitialState();
     }
 
+    getStorageInfo(data) {
+        const {
+            tenant,
+            nodeId,
+            getStorageInfo,
+        } = this.props;
+
+        getStorageInfo({
+            tenant,
+            nodeId,
+            ...data,
+        }, {
+            concurrentId: 'getStorageInfo',
+        });
+    }
+
     renderLoader() {
         return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
+            <TableSkeleton className={b('loader')}/>
         );
     }
 
@@ -200,8 +201,9 @@ class Storage extends React.Component {
     };
 
     renderControls() {
-        const {setStorageFilter, visibleEntities, storageType, flatListStorageEntities} =
+        const {setStorageFilter, visibleEntities, storageType, flatListStorageEntities, loading, wasLoaded} =
             this.props;
+        const showLoader = loading && !wasLoaded;
         return (
             <div className={b('controls')}>
                 <div className={b('search')}>
@@ -232,25 +234,28 @@ class Storage extends React.Component {
                 </RadioButton>
                 <Label theme="info" size="m">{`${
                     storageType === StorageTypes.groups ? 'Groups' : 'Nodes'
-                }: ${flatListStorageEntities.length}`}</Label>
+                }: ${(showLoader) ? '...' : flatListStorageEntities.length}`}</Label>
             </div>
         );
     }
 
     render() {
         const {loading, wasLoaded, error} = this.props;
-        if (loading && !wasLoaded) {
-            return this.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else {
-            return (
-                <div className={b()}>
-                    {this.renderControls()}
-                    {this.renderDataTable()}
-                </div>
-            );
-        }
+        const showLoader = loading && !wasLoaded;
+
+        return (
+            <div className={b()}>
+                {this.renderControls()}
+                {error && (
+                    <div>{error.statusText}</div>
+                )}
+                {showLoader ? (
+                    this.renderLoader()
+                ) : (
+                    this.renderDataTable()
+                )}
+            </div>
+        );
     }
 }
 

src/containers/Storage/Storage.scss

@@ -43,12 +43,6 @@
         }
     }
 
-    &__loader {
-        display: flex;
-        justify-content: center;
-
-        margin-top: 100px;
-    }
     .entity-status {
         justify-content: center;
     }

src/services/api.js

@@ -35,7 +35,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             storage: true,
         });
     }
-    getStorageInfo({tenant, filter, nodeId, type}) {
+    getStorageInfo({tenant, filter, nodeId, type}, {concurrentId}) {
         return this.get(
             this.getPath(
                 `/viewer/json/${type === StorageTypes.nodes ? 'nodes' : 'storage'}?enums=true`,
@@ -45,6 +45,9 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 node_id: nodeId,
                 with: filter,
             },
+            {
+                concurrentId,
+            },
         );
     }
     getPdiskInfo(nodeId, pdiskId) {

src/store/reducers/storage.js

@@ -74,13 +74,16 @@ const storage = function z(state = initialState, action) {
             return {
                 ...state,
                 visible: action.data,
+                wasLoaded: false,
+                error: undefined,
             };
         }
         case SET_STORAGE_TYPE: {
             return {
                 ...state,
                 type: action.data,
                 wasLoaded: false,
+                error: undefined,
             };
         }
         default:
@@ -94,9 +97,9 @@ export function setInitialState() {
     };
 }
 
-export function getStorageInfo({tenant, filter, nodeId, type}) {
+export function getStorageInfo({tenant, filter, nodeId, type}, {concurrentId}) {
     return createApiRequest({
-        request: window.api.getStorageInfo({tenant, filter, nodeId, type}),
+        request: window.api.getStorageInfo({tenant, filter, nodeId, type}, {concurrentId}),
         actions: FETCH_STORAGE,
     });
 }