From 43fdf78d7347f7c92d0cf40ef756bb9b21e43e2b Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Mon, 31 Jul 2023 21:14:21 +0530
Subject: [PATCH] ui: fixed loading issue in table, and remove unwanted params
 from API in table profiler (#12668)

* ui: fixed loading issue in table, and remove unwanted params from API in table profiler

* fixed unit test and addressing comment

* added "testDefinition" params to API as it required to for edit test
---
 .../BotListV1/BotListV1.component.tsx         |  30 +++---
 .../DataInsightDetail/TopActiveUsers.tsx      |   5 +-
 .../DataInsightDetail/TopViewEntities.tsx     |   7 +-
 .../TestSuites/TestSuites.component.tsx       |  27 ++---
 .../GlossaryImportResult.component.tsx        |   8 +-
 .../component/DataQualityTab.tsx              |  46 ++++----
 .../TableProfiler/TableProfilerV1.tsx         | 100 ++++++++++--------
 .../TeamImportResult.component.tsx            |  10 +-
 .../UserImportResult.component.tsx            |  10 +-
 .../ui/src/components/UserList/UserListV1.tsx |  34 +++---
 .../ui/src/pages/AlertsPage/AlertsPage.tsx    |  60 +++++------
 .../ui/src/pages/DataInsightPage/KPIList.tsx  |  29 ++---
 .../DatabaseSchemaPage/SchemaTablesTab.tsx    |   8 +-
 .../ServiceMainTabContent.tsx                 |  34 +++---
 .../ui/src/pages/TagsPage/TagsPage.tsx        |  33 +++---
 15 files changed, 231 insertions(+), 210 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
index 380b368d4b5..cc3ec3d50d0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
@@ -267,21 +267,21 @@ const BotListV1 = ({
       <Col span={24}>
         <Row>
           <Col span={24}>
-            <Table
-              bordered
-              columns={columns}
-              dataSource={searchedData}
-              loading={{
-                spinning: loading,
-                indicator: <Loader size="small" />,
-              }}
-              locale={{
-                emptyText: <FilterTablePlaceHolder />,
-              }}
-              pagination={false}
-              rowKey="name"
-              size="small"
-            />
+            {loading ? (
+              <Loader />
+            ) : (
+              <Table
+                bordered
+                columns={columns}
+                dataSource={searchedData}
+                locale={{
+                  emptyText: <FilterTablePlaceHolder />,
+                }}
+                pagination={false}
+                rowKey="name"
+                size="small"
+              />
+            )}
           </Col>
           <Col span={24}>
             {paging.total > PAGE_SIZE_LARGE && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopActiveUsers.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopActiveUsers.tsx
index 9b5abf03ef4..ef604fb1177 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopActiveUsers.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopActiveUsers.tsx
@@ -135,14 +135,15 @@ const TopActiveUsers: FC<Props> = ({ chartFilter }) => {
           }}
         />
       }>
-      {isEmpty(mostActiveUsers) ? (
+      {isLoading ? (
+        <Loader />
+      ) : isEmpty(mostActiveUsers) ? (
         <EmptyGraphPlaceholder />
       ) : (
         <Table
           className="data-insight-table-wrapper"
           columns={columns}
           dataSource={mostActiveUsers}
-          loading={{ spinning: isLoading, indicator: <Loader /> }}
           pagination={false}
           size="small"
         />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopViewEntities.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopViewEntities.tsx
index 482351f79cb..285dc790c3e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopViewEntities.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopViewEntities.tsx
@@ -15,6 +15,7 @@ import { Card, Space, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import PageHeader from 'components/header/PageHeader.component';
+import Loader from 'components/Loader/Loader';
 import { isEmpty, isUndefined } from 'lodash';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +28,6 @@ import { ChartFilter } from '../../interface/data-insight.interface';
 import { getDecodedFqn } from '../../utils/StringsUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
-import Loader from '../Loader/Loader';
 import './DataInsightDetail.less';
 import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
 
@@ -130,14 +130,15 @@ const TopViewEntities: FC<Props> = ({ chartFilter }) => {
           }}
         />
       }>
-      {isEmpty(mostViewedEntities) ? (
+      {isLoading ? (
+        <Loader />
+      ) : isEmpty(mostViewedEntities) ? (
         <EmptyGraphPlaceholder />
       ) : (
         <Table
           className="data-insight-table-wrapper"
           columns={columns}
           dataSource={mostViewedEntities}
-          loading={{ spinning: isLoading, indicator: <Loader /> }}
           pagination={false}
           size="small"
         />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuites/TestSuites.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuites/TestSuites.component.tsx
index 018ab01b69e..c327fbcc582 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuites/TestSuites.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuites/TestSuites.component.tsx
@@ -198,18 +198,21 @@ export const TestSuites = ({ summaryPanel }: { summaryPanel: ReactNode }) => {
 
       <Col span={24}>{summaryPanel}</Col>
       <Col span={24}>
-        <Table
-          bordered
-          columns={columns}
-          data-testid="test-suite-table"
-          dataSource={testSuites.data}
-          loading={{ spinning: isLoading, indicator: <Loader /> }}
-          locale={{
-            emptyText: <FilterTablePlaceHolder />,
-          }}
-          pagination={false}
-          size="small"
-        />
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <Table
+            bordered
+            columns={columns}
+            data-testid="test-suite-table"
+            dataSource={testSuites.data}
+            locale={{
+              emptyText: <FilterTablePlaceHolder />,
+            }}
+            pagination={false}
+            size="small"
+          />
+        )}
       </Col>
       <Col span={24}>
         {testSuites.paging.total > PAGE_SIZE && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportResult/GlossaryImportResult.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportResult/GlossaryImportResult.component.tsx
index 5a8b59976a3..963b9d30a66 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportResult/GlossaryImportResult.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportResult/GlossaryImportResult.component.tsx
@@ -216,16 +216,16 @@ export const GlossaryImportResult: FC<Props> = ({ csvImportResult }) => {
     parseCsvFile();
   }, [csvImportResult.importResultsCsv]);
 
+  if (loading) {
+    return <Loader />;
+  }
+
   return (
     <Table
       bordered
       columns={columns}
       data-testid="import-result-table"
       dataSource={parsedRecords}
-      loading={{
-        spinning: loading,
-        indicator: <Loader size="small" />,
-      }}
       pagination={false}
       rowKey="name"
       scroll={{ x: true }}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx
index f8f27ace259..9e631398e2e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx
@@ -401,29 +401,29 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
   return (
     <Row gutter={16}>
       <Col span={24}>
-        <Table
-          bordered
-          className="test-case-table-container"
-          columns={columns}
-          data-testid="test-case-table"
-          dataSource={sortedData}
-          expandable={{
-            ...getTableExpandableConfig<TestCase>(),
-            expandRowByClick: true,
-            rowExpandable: () => true,
-            expandedRowRender: (recode) => <TestSummary data={recode} />,
-          }}
-          loading={{
-            indicator: <Loader size="small" />,
-            spinning: isLoading,
-          }}
-          locale={{
-            emptyText: <FilterTablePlaceHolder />,
-          }}
-          pagination={false}
-          rowKey="id"
-          size="small"
-        />
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <Table
+            bordered
+            className="test-case-table-container"
+            columns={columns}
+            data-testid="test-case-table"
+            dataSource={sortedData}
+            expandable={{
+              ...getTableExpandableConfig<TestCase>(),
+              expandRowByClick: true,
+              rowExpandable: () => true,
+              expandedRowRender: (recode) => <TestSummary data={recode} />,
+            }}
+            locale={{
+              emptyText: <FilterTablePlaceHolder />,
+            }}
+            pagination={false}
+            rowKey="id"
+            size="small"
+          />
+        )}
       </Col>
       <Col span={24}>
         {!isUndefined(pagingData) && pagingData.paging.total > PAGE_SIZE && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
index dc852f2430c..6845dabdff4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
@@ -31,6 +31,7 @@ import classNames from 'classnames';
 import { SummaryCard } from 'components/common/SummaryCard/SummaryCard.component';
 import { SummaryCardProps } from 'components/common/SummaryCard/SummaryCard.interface';
 import DatePickerMenu from 'components/DatePickerMenu/DatePickerMenu.component';
+import Loader from 'components/Loader/Loader';
 import { DateRangeObject } from 'components/ProfilerDashboard/component/TestSummary';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
 import { useTourProvider } from 'components/TourProvider/TourProvider';
@@ -136,7 +137,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
   const [selectedTestCaseStatus, setSelectedTestCaseStatus] =
     useState<string>('');
   const [selectedTestType, setSelectedTestType] = useState('');
-  const [isTestCaseLoading, setIsTestCaseLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [dateRangeObject, setDateRangeObject] =
     useState<DateRangeObject>(DEFAULT_RANGE_DATA);
 
@@ -379,11 +380,11 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
   };
 
   const fetchAllTests = async (params?: ListTestCaseParams) => {
-    setIsTestCaseLoading(true);
+    setIsLoading(true);
     try {
       const { data } = await getListTestCase({
         ...params,
-        fields: 'testCaseResult,entityLink,testDefinition,testSuite',
+        fields: 'testCaseResult, testDefinition',
         entityLink: generateEntityLink(datasetFQN || ''),
         includeAllTests: true,
         limit: API_RES_MAX_SIZE,
@@ -393,7 +394,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsTestCaseLoading(false);
+      setIsLoading(false);
     }
   };
 
@@ -444,11 +445,14 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     // and the datasetFQN comes form url parameter which is already encoded,
     // we are decoding FQN below to avoid double encoding in the API function
     const decodedDatasetFQN = decodeURIComponent(datasetFQN);
+    setIsLoading(true);
     try {
       const response = await getLatestTableProfileByFqn(decodedDatasetFQN);
       setTable(response);
     } catch (error) {
       showErrorToast(error as AxiosError);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -485,18 +489,20 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
   }, [viewTest, isTourOpen, isTableProfile, allTests]);
 
   useEffect(() => {
-    if (
+    const fetchProfiler =
       !isTableDeleted &&
       datasetFQN &&
       !isTourOpen &&
-      (isTableProfile || isColumnProfile)
-    ) {
+      (isTableProfile || isColumnProfile) &&
+      isUndefined(table);
+
+    if (fetchProfiler) {
       fetchLatestProfilerData();
     }
     if (isTourOpen) {
       setTable(mockDatasetData.tableDetails as unknown as Table);
     }
-  }, [datasetFQN, isTourOpen, isTableProfile]);
+  }, [datasetFQN, isTourOpen, isTableProfile, isColumnProfile]);
 
   return (
     <Row
@@ -629,6 +635,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
                     <Col key={summery.title}>
                       <SummaryCard
                         className={classNames(summery.className, 'h-full')}
+                        isLoading={isLoading}
                         showProgressBar={false}
                         title={summery.title}
                         total={0}
@@ -641,6 +648,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
                       <Col key={key}>
                         <SummaryCard
                           showProgressBar
+                          isLoading={isLoading}
                           title={key}
                           total={selectedColumnTestsObj.totalTests}
                           type={toLower(key) as SummaryCardProps['type']}
@@ -653,44 +661,50 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
             )}
           </Row>
 
-          {isColumnProfile && (
-            <ColumnProfileTable
-              columnTests={columnTests}
-              columns={columns.map((col) => ({
-                ...col,
-                key: col.name,
-              }))}
-              dateRangeObject={dateRangeObject}
-              hasEditAccess={editTest}
-            />
-          )}
+          {isLoading ? (
+            <Loader />
+          ) : (
+            <>
+              {isColumnProfile && (
+                <ColumnProfileTable
+                  columnTests={columnTests}
+                  columns={columns.map((col) => ({
+                    ...col,
+                    key: col.name,
+                  }))}
+                  dateRangeObject={dateRangeObject}
+                  hasEditAccess={editTest}
+                />
+              )}
 
-          {isDataQuality && (
-            <QualityTab
-              afterDeleteAction={fetchAllTests}
-              isLoading={isTestCaseLoading}
-              showTableColumn={false}
-              testCases={getFilterTestCase()}
-              testSuite={testSuite}
-              onTestCaseResultUpdate={handleResultUpdate}
-              onTestUpdate={handleTestUpdate}
-            />
-          )}
+              {isDataQuality && (
+                <QualityTab
+                  afterDeleteAction={fetchAllTests}
+                  isLoading={isLoading}
+                  showTableColumn={false}
+                  testCases={getFilterTestCase()}
+                  testSuite={testSuite}
+                  onTestCaseResultUpdate={handleResultUpdate}
+                  onTestUpdate={handleTestUpdate}
+                />
+              )}
 
-          {isTableProfile && (
-            <TableProfilerChart
-              dateRangeObject={dateRangeObject}
-              showOperationGraph={showOperationGraph}
-            />
-          )}
+              {isTableProfile && (
+                <TableProfilerChart
+                  dateRangeObject={dateRangeObject}
+                  showOperationGraph={showOperationGraph}
+                />
+              )}
 
-          {settingModalVisible && (
-            <ProfilerSettingsModal
-              columns={columns}
-              tableId={table?.id || ''}
-              visible={settingModalVisible}
-              onVisibilityChange={handleSettingModal}
-            />
+              {settingModalVisible && (
+                <ProfilerSettingsModal
+                  columns={columns}
+                  tableId={table?.id || ''}
+                  visible={settingModalVisible}
+                  onVisibilityChange={handleSettingModal}
+                />
+              )}
+            </>
           )}
         </Space>
       </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamImportResult/TeamImportResult.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamImportResult/TeamImportResult.component.tsx
index b5a7f048d72..19006935221 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamImportResult/TeamImportResult.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamImportResult/TeamImportResult.component.tsx
@@ -199,6 +199,8 @@ export const TeamImportResult = ({
           setIsLoading(false);
         },
       });
+    } else {
+      setIsLoading(false);
     }
   };
 
@@ -207,16 +209,16 @@ export const TeamImportResult = ({
     parseCsvFile();
   }, [csvImportResult.importResultsCsv]);
 
+  if (loading) {
+    return <Loader />;
+  }
+
   return (
     <Table
       bordered
       columns={columns}
       data-testid="import-result-table"
       dataSource={parsedRecords}
-      loading={{
-        spinning: loading,
-        indicator: <Loader size="small" />,
-      }}
       pagination={false}
       rowKey="name*"
       scroll={{ x: true }}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Team/UserImportResult/UserImportResult.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Team/UserImportResult/UserImportResult.component.tsx
index 73a265ddb1d..ea71c94a941 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Team/UserImportResult/UserImportResult.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Team/UserImportResult/UserImportResult.component.tsx
@@ -191,6 +191,8 @@ export const UserImportResult = ({
           setIsLoading(false);
         },
       });
+    } else {
+      setIsLoading(false);
     }
   };
 
@@ -199,6 +201,10 @@ export const UserImportResult = ({
     parseCsvFile();
   }, [csvImportResult.importResultsCsv]);
 
+  if (loading) {
+    return <Loader />;
+  }
+
   return (
     <Table
       bordered
@@ -206,10 +212,6 @@ export const UserImportResult = ({
       columns={columns}
       data-testid="import-result-table"
       dataSource={parsedRecords}
-      loading={{
-        spinning: loading,
-        indicator: <Loader size="small" />,
-      }}
       pagination={false}
       rowKey="name*"
       scroll={{ x: true }}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
index 63f0dab19a0..307f883662d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
@@ -252,23 +252,23 @@ const UserListV1: FC<UserListV1Props> = ({
       </Col>
 
       <Col span={24}>
-        <Table
-          bordered
-          className="user-list-table"
-          columns={columns}
-          data-testid="user-list-table"
-          dataSource={data}
-          loading={{
-            spinning: isDataLoading,
-            indicator: <Loader size="small" />,
-          }}
-          locale={{
-            emptyText: <FilterTablePlaceHolder />,
-          }}
-          pagination={false}
-          rowKey="id"
-          size="small"
-        />
+        {isDataLoading ? (
+          <Loader />
+        ) : (
+          <Table
+            bordered
+            className="user-list-table"
+            columns={columns}
+            data-testid="user-list-table"
+            dataSource={data}
+            locale={{
+              emptyText: <FilterTablePlaceHolder />,
+            }}
+            pagination={false}
+            rowKey="id"
+            size="small"
+          />
+        )}
       </Col>
       <Col span={24}>
         {paging.total > PAGE_SIZE_MEDIUM && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx
index b721c579984..811c165c784 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx
@@ -185,37 +185,37 @@ const AlertsPage = () => {
           </div>
         </Col>
         <Col span={24}>
-          <Table
-            bordered
-            columns={columns}
-            dataSource={alerts}
-            loading={{
-              spinning: loading,
-              indicator: <Loader size="small" />,
-            }}
-            locale={{
-              emptyText: !loading && (
-                <ErrorPlaceHolder
-                  permission
-                  className="p-y-md"
-                  doc={ALERTS_DOCS}
-                  heading={t('label.alert')}
-                  type={ERROR_PLACEHOLDER_TYPE.CREATE}
-                  onClick={() =>
-                    history.push(
-                      getSettingPath(
-                        GlobalSettingsMenuCategory.NOTIFICATIONS,
-                        GlobalSettingOptions.ADD_ALERTS
+          {loading ? (
+            <Loader />
+          ) : (
+            <Table
+              bordered
+              columns={columns}
+              dataSource={alerts}
+              locale={{
+                emptyText: !loading && (
+                  <ErrorPlaceHolder
+                    permission
+                    className="p-y-md"
+                    doc={ALERTS_DOCS}
+                    heading={t('label.alert')}
+                    type={ERROR_PLACEHOLDER_TYPE.CREATE}
+                    onClick={() =>
+                      history.push(
+                        getSettingPath(
+                          GlobalSettingsMenuCategory.NOTIFICATIONS,
+                          GlobalSettingOptions.ADD_ALERTS
+                        )
                       )
-                    )
-                  }
-                />
-              ),
-            }}
-            pagination={false}
-            rowKey="id"
-            size="middle"
-          />
+                    }
+                  />
+                ),
+              }}
+              pagination={false}
+              rowKey="id"
+              size="middle"
+            />
+          )}
         </Col>
         <Col span={24}>
           {Boolean(
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
index c4711f4a438..df98ac921f8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
@@ -201,19 +201,22 @@ const KPIList = ({ viewKPIPermission }: { viewKPIPermission: boolean }) => {
   return (
     <>
       <Col span={24}>
-        <Table
-          bordered
-          columns={columns}
-          data-testid="kpi-table"
-          dataSource={kpiList}
-          loading={{ spinning: isLoading, indicator: <Loader /> }}
-          locale={{
-            emptyText: noDataPlaceHolder,
-          }}
-          pagination={false}
-          rowKey="name"
-          size="small"
-        />
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <Table
+            bordered
+            columns={columns}
+            data-testid="kpi-table"
+            dataSource={kpiList}
+            locale={{
+              emptyText: noDataPlaceHolder,
+            }}
+            pagination={false}
+            rowKey="name"
+            size="small"
+          />
+        )}
       </Col>
       {kpiList.length > PAGE_SIZE_MEDIUM && (
         <Col span={24}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx
index e8774bfa6c6..7992d407110 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx
@@ -144,7 +144,9 @@ function SchemaTablesTab({
         </Row>
       </Col>
       <Col span={24}>
-        {isEmpty(tableData) && !showDeletedTables && !tableDataLoading ? (
+        {tableDataLoading ? (
+          <Loader />
+        ) : isEmpty(tableData) && !showDeletedTables ? (
           <ErrorPlaceHolder
             className="mt-0-important"
             type={ERROR_PLACEHOLDER_TYPE.NO_DATA}
@@ -155,10 +157,6 @@ function SchemaTablesTab({
             columns={tableColumn}
             data-testid="databaseSchema-tables"
             dataSource={tableData.data}
-            loading={{
-              spinning: tableDataLoading,
-              indicator: <Loader size="small" />,
-            }}
             locale={{
               emptyText: <ErrorPlaceHolder />,
             }}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx
index 1f2232b5cc2..e34c9872d79 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx
@@ -289,23 +289,23 @@ function ServiceMainTabContent({
             </Row>
           </Col>
           <Col data-testid="table-container" span={24}>
-            <Table
-              bordered
-              columns={tableColumn}
-              components={tableComponent}
-              data-testid="service-children-table"
-              dataSource={data}
-              loading={{
-                spinning: isServiceLoading,
-                indicator: <Loader size="small" />,
-              }}
-              locale={{
-                emptyText: <ErrorPlaceHolder className="m-y-md" />,
-              }}
-              pagination={false}
-              rowKey="id"
-              size="small"
-            />
+            {isServiceLoading ? (
+              <Loader />
+            ) : (
+              <Table
+                bordered
+                columns={tableColumn}
+                components={tableComponent}
+                data-testid="service-children-table"
+                dataSource={data}
+                locale={{
+                  emptyText: <ErrorPlaceHolder className="m-y-md" />,
+                }}
+                pagination={false}
+                rowKey="id"
+                size="small"
+              />
+            )}
             {Boolean(!isNil(paging.after) || !isNil(paging.before)) &&
               !isEmpty(data) && (
                 <NextPrevious
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx
index a0a34b044bb..c2723e3e567 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx
@@ -17,7 +17,6 @@ import {
   Col,
   Row,
   Space,
-  Spin,
   Switch,
   Table,
   Tooltip,
@@ -1139,23 +1138,21 @@ const TagsPage = () => {
             </Space>
           </div>
 
-          <Table
-            bordered
-            className={isClassificationDisabled ? 'opacity-60' : ''}
-            columns={tableColumn}
-            data-testid="table"
-            dataSource={tags}
-            loading={{
-              indicator: (
-                <Spin indicator={<Loader size="small" />} size="small" />
-              ),
-              spinning: isTagsLoading,
-            }}
-            pagination={false}
-            rowClassName={(record) => (record.disabled ? 'opacity-60' : '')}
-            rowKey="id"
-            size="small"
-          />
+          {isTagsLoading ? (
+            <Loader />
+          ) : (
+            <Table
+              bordered
+              className={isClassificationDisabled ? 'opacity-60' : ''}
+              columns={tableColumn}
+              data-testid="table"
+              dataSource={tags}
+              pagination={false}
+              rowClassName={(record) => (record.disabled ? 'opacity-60' : '')}
+              rowKey="id"
+              size="small"
+            />
+          )}
           {paging.total > PAGE_SIZE && (
             <NextPrevious
               currentPage={currentPage}