Fix : Charts details display issue in summary panels. (#20666)

* fix charts details display issue in summary panels

* minor fix

* added loader

openmetadata-ui/src/main/resources/ui/src/components/DataAssetSummaryPanel/DataAssetSummaryPanel.tsx

@@ -56,6 +56,8 @@ export const DataAssetSummaryPanel = ({
     Record<string, number | string>
   >({});
   const [charts, setCharts] = useState<Chart[]>([]);
+  const [chartsDetailsLoading, setChartsDetailsLoading] =
+    useState<boolean>(false);
   const [entityPermissions, setEntityPermissions] =
     useState<OperationPermission | null>(null);
   const { isTourPage } = useTourProvider();
@@ -71,9 +73,10 @@ export const DataAssetSummaryPanel = ({
       entityType === EntityType.DASHBOARD
         ? ({ ...dataAsset, charts } as any)
         : dataAsset,
-      highlights
+      highlights,
+      entityType === EntityType.DASHBOARD ? chartsDetailsLoading : false
     );
-  }, [dataAsset, entityType, highlights]);
+  }, [dataAsset, entityType, highlights, charts, chartsDetailsLoading]);
 
   const isEntityDeleted = useMemo(() => dataAsset.deleted, [dataAsset]);
 
@@ -105,12 +108,14 @@ export const DataAssetSummaryPanel = ({
   }, [dataAsset?.fullyQualifiedName, entityPermissions]);
 
   const fetchChartsDetails = useCallback(async () => {
+    setChartsDetailsLoading(true);
     try {
       const chartDetails = await fetchCharts((dataAsset as Dashboard).charts);
-
       setCharts(chartDetails);
     } catch (err) {
       // Error
+    } finally {
+      setChartsDetailsLoading(false);
     }
   }, [dataAsset]);
 

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SummaryList/SummaryList.component.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Collapse, Row, Typography } from 'antd';
+import { Collapse, Row, Skeleton, Typography } from 'antd';
 import { isEmpty, isUndefined } from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -26,9 +26,18 @@ export default function SummaryList({
   formattedEntityData,
   entityType,
   emptyPlaceholderText,
-}: SummaryListProps) {
+  loading = false,
+}: Readonly<SummaryListProps>) {
   const { t } = useTranslation();
 
+  if (loading) {
+    return (
+      <Row align="middle" data-testid="summary-list-loader">
+        <Skeleton active paragraph={{ rows: 1 }} />
+      </Row>
+    );
+  }
+
   return (
     <Row align="middle" data-testid="summary-list">
       {isEmpty(formattedEntityData) ? (

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SummaryList/SummaryList.interface.ts

@@ -42,4 +42,5 @@ export interface SummaryListProps {
   formattedEntityData: BasicEntityInfo[];
   entityType?: SummaryEntityType;
   emptyPlaceholderText?: string;
+  loading?: boolean;
 }

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SummaryList/SummaryListItems/SummaryListItems.component.tsx

@@ -46,7 +46,11 @@ function SummaryListItem({
                 iconClassName: 'm-r-xss',
                 iconWidth: '14px',
               })}
-            {entityDetails.title}
+            <Typography.Text
+              className="m-r-xs"
+              ellipsis={{ tooltip: entityDetails.title }}>
+              {entityDetails.title}
+            </Typography.Text>
 
             {entityDetails.type && (
               <AppBadge

openmetadata-ui/src/main/resources/ui/src/utils/EntitySummaryPanelUtils.tsx

@@ -384,7 +384,8 @@ export const getFormattedEntityData = (
 export const getEntityChildDetails = (
   entityType: EntityType,
   entityInfo: SearchedDataProps['data'][number]['_source'],
-  highlights?: SearchedDataProps['data'][number]['highlight']
+  highlights?: SearchedDataProps['data'][number]['highlight'],
+  loading?: boolean
 ) => {
   let childComponent;
   let heading;
@@ -456,7 +457,9 @@ export const getEntityChildDetails = (
 
       return (
         <>
-          <Row className="p-md border-radius-card" gutter={[0, 8]}>
+          <Row
+            className="p-md border-radius-card summary-panel-card"
+            gutter={[0, 8]}>
             <Col span={24}>
               <Typography.Text
                 className="summary-panel-section-title"
@@ -465,11 +468,16 @@ export const getEntityChildDetails = (
               </Typography.Text>
             </Col>
             <Col span={24}>
-              <SummaryList formattedEntityData={formattedChartsData} />
+              <SummaryList
+                formattedEntityData={formattedChartsData}
+                loading={loading}
+              />
             </Col>
           </Row>
 
-          <Row className="p-md border-radius-card" gutter={[0, 8]}>
+          <Row
+            className="p-md border-radius-card summary-panel-card"
+            gutter={[0, 8]}>
             <Col span={24}>
               <Typography.Text
                 className="summary-panel-section-title"