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

openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx

@@ -267,14 +267,13 @@ const BotListV1 = ({
       <Col span={24}>
         <Row>
           <Col span={24}>
+            {loading ? (
+              <Loader />
+            ) : (
               <Table
                 bordered
                 columns={columns}
                 dataSource={searchedData}
-              loading={{
-                spinning: loading,
-                indicator: <Loader size="small" />,
-              }}
                 locale={{
                   emptyText: <FilterTablePlaceHolder />,
                 }}
@@ -282,6 +281,7 @@ const BotListV1 = ({
                 rowKey="name"
                 size="small"
               />
+            )}
           </Col>
           <Col span={24}>
             {paging.total > PAGE_SIZE_LARGE && (

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"
         />

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"
         />

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}>
+        {isLoading ? (
+          <Loader />
+        ) : (
           <Table
             bordered
             columns={columns}
             data-testid="test-suite-table"
             dataSource={testSuites.data}
-          loading={{ spinning: isLoading, indicator: <Loader /> }}
             locale={{
               emptyText: <FilterTablePlaceHolder />,
             }}
             pagination={false}
             size="small"
           />
+        )}
       </Col>
       <Col span={24}>
         {testSuites.paging.total > PAGE_SIZE && (

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 }}

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx

@@ -401,6 +401,9 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
   return (
     <Row gutter={16}>
       <Col span={24}>
+        {isLoading ? (
+          <Loader />
+        ) : (
           <Table
             bordered
             className="test-case-table-container"
@@ -413,10 +416,6 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
               rowExpandable: () => true,
               expandedRowRender: (recode) => <TestSummary data={recode} />,
             }}
-          loading={{
-            indicator: <Loader size="small" />,
-            spinning: isLoading,
-          }}
             locale={{
               emptyText: <FilterTablePlaceHolder />,
             }}
@@ -424,6 +423,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
             rowKey="id"
             size="small"
           />
+        )}
       </Col>
       <Col span={24}>
         {!isUndefined(pagingData) && pagingData.paging.total > PAGE_SIZE && (

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,6 +661,10 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
             )}
           </Row>
 
+          {isLoading ? (
+            <Loader />
+          ) : (
+            <>
               {isColumnProfile && (
                 <ColumnProfileTable
                   columnTests={columnTests}
@@ -668,7 +680,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
               {isDataQuality && (
                 <QualityTab
                   afterDeleteAction={fetchAllTests}
-              isLoading={isTestCaseLoading}
+                  isLoading={isLoading}
                   showTableColumn={false}
                   testCases={getFilterTestCase()}
                   testSuite={testSuite}
@@ -692,6 +704,8 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
                   onVisibilityChange={handleSettingModal}
                 />
               )}
+            </>
+          )}
         </Space>
       </Col>
     </Row>

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 }}

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 }}

openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx

@@ -252,16 +252,15 @@ const UserListV1: FC<UserListV1Props> = ({
       </Col>
 
       <Col span={24}>
+        {isDataLoading ? (
+          <Loader />
+        ) : (
           <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 />,
             }}
@@ -269,6 +268,7 @@ const UserListV1: FC<UserListV1Props> = ({
             rowKey="id"
             size="small"
           />
+        )}
       </Col>
       <Col span={24}>
         {paging.total > PAGE_SIZE_MEDIUM && (

openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx

@@ -185,14 +185,13 @@ const AlertsPage = () => {
           </div>
         </Col>
         <Col span={24}>
+          {loading ? (
+            <Loader />
+          ) : (
             <Table
               bordered
               columns={columns}
               dataSource={alerts}
-            loading={{
-              spinning: loading,
-              indicator: <Loader size="small" />,
-            }}
               locale={{
                 emptyText: !loading && (
                   <ErrorPlaceHolder
@@ -216,6 +215,7 @@ const AlertsPage = () => {
               rowKey="id"
               size="middle"
             />
+          )}
         </Col>
         <Col span={24}>
           {Boolean(

openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx

@@ -201,12 +201,14 @@ const KPIList = ({ viewKPIPermission }: { viewKPIPermission: boolean }) => {
   return (
     <>
       <Col span={24}>
+        {isLoading ? (
+          <Loader />
+        ) : (
           <Table
             bordered
             columns={columns}
             data-testid="kpi-table"
             dataSource={kpiList}
-          loading={{ spinning: isLoading, indicator: <Loader /> }}
             locale={{
               emptyText: noDataPlaceHolder,
             }}
@@ -214,6 +216,7 @@ const KPIList = ({ viewKPIPermission }: { viewKPIPermission: boolean }) => {
             rowKey="name"
             size="small"
           />
+        )}
       </Col>
       {kpiList.length > PAGE_SIZE_MEDIUM && (
         <Col span={24}>

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 />,
             }}

openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx

@@ -289,16 +289,15 @@ function ServiceMainTabContent({
             </Row>
           </Col>
           <Col data-testid="table-container" span={24}>
+            {isServiceLoading ? (
+              <Loader />
+            ) : (
               <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" />,
                 }}
@@ -306,6 +305,7 @@ function ServiceMainTabContent({
                 rowKey="id"
                 size="small"
               />
+            )}
             {Boolean(!isNil(paging.after) || !isNil(paging.before)) &&
               !isEmpty(data) && (
                 <NextPrevious

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>
 
+          {isTagsLoading ? (
+            <Loader />
+          ) : (
             <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"
             />
+          )}
           {paging.total > PAGE_SIZE && (
             <NextPrevious
               currentPage={currentPage}