fix(ui): tabs flickers on permission api response (#9957)

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

@@ -16,7 +16,13 @@ import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { isEqual, isNil, isUndefined } from 'lodash';
 import { EntityTags, ExtraInfo } from 'Models';
-import React, { RefObject, useCallback, useEffect, useState } from 'react';
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { restoreTable } from 'rest/tableAPI';
@@ -137,6 +143,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
   const [isFollowing, setIsFollowing] = useState(false);
   const [usage, setUsage] = useState('');
   const [weeklyUsageCount, setWeeklyUsageCount] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
   const [tableJoinData, setTableJoinData] = useState<TableJoins>({
     startDate: new Date(),
     dayCount: 0,
@@ -158,6 +165,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
   const { getEntityPermission } = usePermissionProvider();
 
   const fetchResourcePermission = useCallback(async () => {
+    setIsLoading(true);
     try {
       const tablePermission = await getEntityPermission(
         ResourceEntity.TABLE,
@@ -169,6 +177,8 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
       showErrorToast(
         jsonData['api-error-messages']['fetch-entity-permissions-error']
       );
+    } finally {
+      setIsLoading(false);
     }
   }, [tableDetails.id, getEntityPermission, setTablePermissions]);
 
@@ -201,7 +211,8 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
     );
     setFollowersCount(followers?.length);
   };
-  const tabs = [
+  const tabs = useMemo(
+    () => [
       {
         name: t('label.schema'),
         icon: {
@@ -302,7 +313,9 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
         isProtected: false,
         position: 9,
       },
-  ];
+    ],
+    [tablePermissions, dataModel, feedCount]
+  );
 
   const getFrequentlyJoinedWithTables = (): Array<
     JoinedWith & { name: string }
@@ -622,7 +635,9 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
     [paging]
   );
 
-  return (
+  return isLoading ? (
+    <Loader />
+  ) : (
     <PageContainerV1>
       <div className="entity-details-container">
         <EntityPageInfo

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -659,7 +659,7 @@
     "delete-team-message": "Any teams under \"{{teamName}}\" will be {{deleteType}} deleted as well.",
     "delete-webhook-permanently": "You want to delete webhook {{webhookName}} permanently? This action cannot be reverted.",
     "discover-your-data-and-unlock-the-value-of-data-assets": "Discover your data and unlock the value of data assets.",
-    "elastic-search-message": "Manage Elastisearch related works here. You can trigger re-create indexes or check the status of re-creating indexes",
+    "elastic-search-message": "Ensure that your Elasticsearch indexes are up-to-date by syncing, or recreating all indexes.",
     "email-is-invalid": "Invalid Email.",
     "enable-column-profile": "Enable column profile",
     "enable-debug-logging": "Enable debug logging",