refactor: partially replace UIKit Loader with project Loader

Author: artemmufazalov

src/components/Loader/Loader.scss

@@ -1,5 +1,8 @@
-@import '../../styles/mixins.scss';
+.ydb-loader {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: center;
+    align-items: center;
 
-.kv-loader {
-    @include loader();
+    height: 100%;
 }

src/components/Loader/Loader.tsx

@@ -3,14 +3,16 @@ import {Loader as KitLoader, LoaderSize} from '@gravity-ui/uikit';
 
 import './Loader.scss';
 
-const b = cn('kv-loader');
+const b = cn('ydb-loader');
 
-function Loader({size = 'l'}: {size?: LoaderSize}) {
+interface LoaderProps {
+    size?: LoaderSize;
+}
+
+export const Loader = ({size = 'm'}: LoaderProps) => {
     return (
         <div className={b()}>
             <KitLoader size={size} />
         </div>
     );
-}
-
-export default Loader;
+};

src/components/Loader/index.ts

@@ -0,0 +1 @@
+export * from './Loader';

src/containers/Node/Node.scss

@@ -45,6 +45,7 @@
     }
 
     &__node-page-wrapper {
+        height: 100%;
         padding: 20px;
     }
 }

src/containers/Node/Node.tsx

@@ -12,7 +12,7 @@ import Tablets from '../Tablets/Tablets';
 import Storage from '../Storage/Storage';
 import NodeOverview from './NodeOverview/NodeOverview';
 import NodeStructure from './NodeStructure/NodeStructure';
-import Loader from '../../components/Loader/Loader';
+import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node';
@@ -132,12 +132,7 @@ function Node(props: NodeProps) {
             }
 
             case OVERVIEW: {
-                return (
-                    <NodeOverview
-                        node={node}
-                        className={b('overview-wrapper')}
-                    />
-                );
+                return <NodeOverview node={node} className={b('overview-wrapper')} />;
             }
 
             case STRUCTURE: {
@@ -155,7 +150,7 @@ function Node(props: NodeProps) {
     };
 
     if (loading && !wasLoaded) {
-        return <Loader />;
+        return <Loader size="l" />;
     } else if (error) {
         return <div>{error.statusText}</div>;
     } else {

src/containers/Node/NodeStructure/NodeStructure.scss

@@ -10,12 +10,6 @@
     @include flex-container();
     @include body2-typography();
 
-    &__loader {
-        display: flex;
-        flex-grow: 1;
-        justify-content: center;
-    }
-
     &__pdisk {
         display: flex;
         flex-direction: column;

src/containers/Node/NodeStructure/NodeStructure.tsx

@@ -6,7 +6,7 @@ import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import {PDisk} from './Pdisk';
-import Loader from '../.././../components/Loader/Loader';
+import {Loader} from '../.././../components/Loader';
 
 import {getNodeStructure, selectNodeStructure} from '../../../store/reducers/node';
 

src/containers/Tenant/Diagnostics/Consumers/Consumers.scss

@@ -3,11 +3,4 @@
         width: 200px;
         margin-bottom: 20px;
     }
-    &__loader {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        height: 100%;
-    }
 }

src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx

@@ -2,9 +2,9 @@ import {useCallback, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
-import {Loader} from '@gravity-ui/uikit';
 import DataTable, {Column} from '@yandex-cloud/react-data-table';
 
+import { Loader } from '../../../../components/Loader';
 import {prepareQueryError} from '../../../../utils/query';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
@@ -78,11 +78,7 @@ export const Consumers = ({path}: ConsumersProps) => {
     ];
 
     if (loading && !wasLoaded) {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
+        return <Loader size="m" />;
     }
 
     if (!loading && error) {

src/containers/Tenant/Diagnostics/Describe/Describe.scss

@@ -13,14 +13,6 @@
         padding: 10px 20px 20px 0;
     }
 
-    &__loader-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        height: 100%;
-    }
-
     &__tree {
         @include json-tree-styles();
     }