change(ui): tabl loader

frontend/app/PrivateRoutes.tsx

@@ -1,4 +1,5 @@
 import withSiteIdUpdater from 'HOCs/withSiteIdUpdater';
+import withSiteIdUpdater from 'HOCs/withSiteIdUpdater';
 import React, { Suspense, lazy } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';

frontend/app/components/Dashboard/components/MetricsList/ListView.tsx

@@ -1,20 +1,17 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
 import {
   Table,
   Typography,
-  Tag,
   Tooltip,
   Input,
   Button,
   Dropdown,
   Modal as AntdModal,
-  Avatar, TableColumnType
+  Avatar, TableColumnType, Spin
 } from 'antd';
 import {
-  TeamOutlined,
-  LockOutlined,
   EditOutlined,
-  DeleteOutlined
+  DeleteOutlined,
 } from '@ant-design/icons';
 import { EllipsisVertical } from 'lucide-react';
 import { TablePaginationConfig, SorterResult } from 'antd/lib/table/interface';
@@ -27,6 +24,7 @@ import cn from 'classnames';
 import { TYPE_ICONS, TYPE_NAMES } from 'App/constants/card';
 import Widget from 'App/mstore/types/widget';
 import { useTranslation } from 'react-i18next';
+import ORLoader from 'Shared/ORLoader';
 
 const { Text } = Typography;
 
@@ -41,14 +39,14 @@ interface Props {
 }
 
 const ListView: React.FC<Props> = ({
-                                     list,
+  list,
-                                     siteId,
+  siteId,
-                                     selectedList,
+  selectedList,
-                                     toggleSelection,
+  toggleSelection,
-                                     disableSelection = false,
+  disableSelection = false,
-                                     inLibrary = false,
+  inLibrary = false,
-                                     loading = false
+  loading = false
-                                   }) => {
+}) => {
   const { t } = useTranslation();
   const [editingMetricId, setEditingMetricId] = useState<number | null>(null);
   const [newName, setNewName] = useState('');
@@ -238,14 +236,6 @@ const ListView: React.FC<Props> = ({
     });
   }
 
-  // if (metricStore.sort.field) {
-  //   columns.forEach((col) => {
-  //     col.sortOrder = col.key === metricStore.sort.field ? metricStore.sort.order : false;
-  //   });
-  // }
-
-  console.log('store', metricStore.sort);
-
   const handleTableChange = (
     pag: TablePaginationConfig,
     _filters: Record<string, (string | number | boolean)[] | null>,
@@ -264,13 +254,17 @@ const ListView: React.FC<Props> = ({
   return (
     <>
       <Table
-        loading={loading}
         columns={columns}
         dataSource={list}
         rowKey="metricId"
         showSorterTooltip={false}
         onChange={handleTableChange}
         sortDirections={['ascend', 'descend']}
+        loading={{
+          spinning: loading,
+          delay: 0,
+          indicator: <Spin indicator={<ORLoader />} />,
+        }}
         onRow={
           inLibrary
             ? (record) => ({

frontend/app/components/shared/ORLoader.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+const OpenReplayPreloader = require('../../svg/openreplay-preloader.svg').default
+
+interface ORLoaderProps {
+  width?: string;
+  height?: string;
+}
+
+const ORLoader: React.FC<ORLoaderProps> = ({ width = '50px', height = '50px' }) => {
+  return (
+    <div className="or-loader" style={{ width, height }}>
+      <img src={OpenReplayPreloader} alt="Loading..." width={width} height={height} />
+    </div>
+  );
+};
+
+export default ORLoader;