perf(ui-perf): lazy-fetch entity extension via Custom Properties tab

Brings the unique work from PR #28017 into this branch so we can close that
PR as superseded. Trims `extension` (custom-property values) from
`defaultFields` on 9 entity-detail pages — Table, Dashboard, Pipeline,
MlModel, StoredProcedure, SearchIndex, Directory, Spreadsheet, Worksheet —
and fetches it lazily on Custom Properties tab activation via a new
`useLazyEntityExtension` hook.

Why this matters:
- Custom property payloads can run into hundreds of KB on entities with
  many user-defined properties. Most users never open the Custom Properties
  tab, so paying for it on first paint is wasted bytes.
- The hook centralises the gated-useQuery + merge-into-state pattern (60s
  staleTime, FQN-scoped queryKey, auto cancellation on FQN change) so each
  page's wiring is 4–8 lines instead of a copy-pasted closure-with-effect.

Test plumbing:
- `setupTests.js` globally mocks `useLazyEntityExtension` to a no-op so
  page tests that render without `QueryClientProvider` keep rendering.
- Per-page `fields=` assertions updated where they hardcode the trimmed
  default-fields string.
- Drive entity tests gain a `useParams` mock (returns `{ tab: ... }`) so
  the page's `useRequiredParams` doesn't throw during render.

Closes the lazy-extension work from PR #28017; that PR can now be closed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: harshach

openmetadata-ui/src/main/resources/ui/src/hooks/useLazyEntityExtension.ts

@@ -0,0 +1,92 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { EntityTabs, TabSpecificField } from '../enums/entity.enum';
+
+interface EntityWithExtension {
+  extension?: unknown;
+}
+
+/**
+ * Lazily fetch an entity's `extension` (custom-property values) only when the user activates
+ * the Custom Properties tab. Replaces what used to be eager inclusion of {@code EXTENSION}
+ * in {@code defaultFields} on every entity-detail page load.
+ *
+ * Why this exists:
+ *  - Custom property payloads can run into hundreds of KB on entities with many user-defined
+ *    properties. Most users never open the Custom Properties tab, so paying for it on first
+ *    paint is wasted bytes.
+ *  - The pattern (gated useQuery + merge into local state) was the same on every entity
+ *    detail page; centralising it avoids 8 copies of the same closure-with-effect.
+ *
+ * Per-page wiring (call at the page top-level, alongside the main entity state):
+ * <pre>
+ *   useLazyEntityExtension&lt;Dashboard&gt;({
+ *     entityType: EntityType.DASHBOARD,
+ *     fqn: dashboardFQN,
+ *     activeTab,
+ *     fetcher: getDashboardByFqn,
+ *     onResolve: (extension) =>
+ *       setDashboardDetails((prev) => ({ ...prev, extension })),
+ *   });
+ * </pre>
+ *
+ * The {@code onResolve} callback shape (rather than passing a setState directly) keeps each
+ * consumer in control of their own state-shape semantics — some pages init state as
+ * `{} as T` (non-undefined), others as `useState<T>()` (T | undefined). Either works.
+ *
+ * Behaviour:
+ *  - Query is gated by `enabled: activeTab === CUSTOM_PROPERTIES && Boolean(fqn)` — does
+ *    nothing on other tabs.
+ *  - Stable `queryKey` of `[`<type>-extension`, fqn]` — cached across tab toggles, refetched
+ *    on FQN change with automatic in-flight cancellation.
+ *  - 60s {@code staleTime} — custom property values change rarely.
+ *  - On resolve, fires {@code onResolve(extension)} exactly once per fresh fetch.
+ *
+ * Caveats:
+ *  - The {@code onResolve} callback identity is not memoised at the call site. We
+ *    deliberately depend only on `data?.extension` so we don't fire the merge effect on
+ *    every parent re-render — the latest callback is captured at fire time.
+ */
+export function useLazyEntityExtension<T extends EntityWithExtension>({
+  entityType,
+  fqn,
+  activeTab,
+  fetcher,
+  onResolve,
+}: {
+  entityType: string;
+  fqn: string | undefined;
+  activeTab: string | undefined;
+  fetcher: (fqn: string, params: { fields: string }) => Promise<T>;
+  onResolve: (extension: T['extension']) => void;
+}): void {
+  const enabled = activeTab === EntityTabs.CUSTOM_PROPERTIES && Boolean(fqn);
+
+  const { data } = useQuery({
+    queryKey: [`${entityType}-extension`, fqn],
+    queryFn: () =>
+      fetcher(fqn as string, { fields: TabSpecificField.EXTENSION }),
+    enabled,
+    staleTime: 60_000,
+  });
+
+  useEffect(() => {
+    if (data?.extension === undefined) {
+      return;
+    }
+    onResolve(data.extension);
+    // onResolve is intentionally omitted from deps — see header comment.
+  }, [data?.extension]);
+}

openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx

@@ -28,14 +28,20 @@ import { usePermissionProvider } from '../../context/PermissionProvider/Permissi
 import { ResourceEntity } from '../../context/PermissionProvider/PermissionProvider.interface';
 import { ClientErrors } from '../../enums/Axios.enum';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
-import { EntityType, TabSpecificField } from '../../enums/entity.enum';
+import {
+  EntityTabs,
+  EntityType,
+  TabSpecificField,
+} from '../../enums/entity.enum';
 import { Chart } from '../../generated/entity/data/chart';
 import { Dashboard } from '../../generated/entity/data/dashboard';
 import { Operation as PermissionOperation } from '../../generated/entity/policies/accessControl/resourcePermission';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import { useFqn } from '../../hooks/useFqn';
+import { useLazyEntityExtension } from '../../hooks/useLazyEntityExtension';
 import {
   addFollower,
+  getDashboardByFqn,
   patchDashboardDetails,
   removeFollower,
   updateDashboardVotes,
@@ -56,6 +62,7 @@ import {
 } from '../../utils/PermissionsUtils';
 import { getVersionPath } from '../../utils/RouterUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
+import { useRequiredParams } from '../../utils/useRequiredParams';
 
 export type ChartType = {
   displayName: string;
@@ -68,6 +75,7 @@ const DashboardDetailsPage = () => {
   const navigate = useNavigate();
   const { getEntityPermissionByFqn } = usePermissionProvider();
   const { entityFqn: dashboardFQN } = useFqn({ type: EntityType.DASHBOARD });
+  const { tab: activeTab } = useRequiredParams<{ tab: EntityTabs }>();
   const queryClient = useQueryClient();
 
   const [permissionsLoading, setPermissionsLoading] = useState<boolean>(true);
@@ -171,6 +179,16 @@ const DashboardDetailsPage = () => {
     [queryClient, dashboardCacheKey]
   );
 
+  // Lazy custom-properties fetch — see {@link useLazyEntityExtension}.
+  useLazyEntityExtension<Dashboard>({
+    entityType: EntityType.DASHBOARD,
+    fqn: dashboardFQN,
+    activeTab,
+    fetcher: getDashboardByFqn,
+    onResolve: (extension) =>
+      setDashboardDetails((prev) => (prev ? { ...prev, extension } : prev)),
+  });
+
   const { id: dashboardId, version, charts } = dashboardDetails ?? {};
   const isFollowing = useMemo(
     () => dashboardDetails?.followers?.some(({ id }) => id === USERId) ?? false,

openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.test.tsx

@@ -111,7 +111,7 @@ describe('DashboardDetailsPage', () => {
     await waitFor(() =>
       expect(getDashboardByFqn).toHaveBeenCalledWith('test-dashboard', {
         fields:
-          'domains,owners, followers, tags, charts,votes,dataProducts,extension,usageSummary',
+          'domains,owners, followers, tags, charts,votes,dataProducts,usageSummary',
       })
     );
 

openmetadata-ui/src/main/resources/ui/src/pages/DirectoryDetailsPage/DirectoryDetailsPage.test.tsx

@@ -108,6 +108,7 @@ jest.mock('../../hooks/useApplicationStore', () => ({
 
 jest.mock('react-router-dom', () => ({
   useNavigate: jest.fn().mockImplementation(() => jest.fn()),
+  useParams: jest.fn().mockReturnValue({ tab: 'children' }),
   MemoryRouter: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="memory-router">{children}</div>
   ),

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

@@ -31,11 +31,16 @@ import {
 } from '../../context/PermissionProvider/PermissionProvider.interface';
 import { ClientErrors } from '../../enums/Axios.enum';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
-import { EntityType, TabSpecificField } from '../../enums/entity.enum';
+import {
+  EntityTabs,
+  EntityType,
+  TabSpecificField,
+} from '../../enums/entity.enum';
 import { Directory } from '../../generated/entity/data/directory';
 import { Operation as PermissionOperation } from '../../generated/entity/policies/accessControl/resourcePermission';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import { useFqn } from '../../hooks/useFqn';
+import { useLazyEntityExtension } from '../../hooks/useLazyEntityExtension';
 import {
   addDriveAssetFollower,
   getDriveAssetByFqn,
@@ -55,6 +60,7 @@ import {
 } from '../../utils/PermissionsUtils';
 import { getVersionPath } from '../../utils/RouterUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
+import { useRequiredParams } from '../../utils/useRequiredParams';
 
 const DirectoryDetailsPage = () => {
   const { t } = useTranslation();
@@ -64,9 +70,22 @@ const DirectoryDetailsPage = () => {
   const { getEntityPermissionByFqn } = usePermissionProvider();
 
   const { fqn: directoryFQN } = useFqn();
+  const { tab: activeTab } = useRequiredParams<{ tab: EntityTabs }>();
   const [directoryDetails, setDirectoryDetails] = useState<Directory>(
     {} as Directory
   );
+
+  // Lazy custom-properties fetch — see {@link useLazyEntityExtension}.
+  // getDriveAssetByFqn has a different signature (entityType-keyed) so we adapt it.
+  useLazyEntityExtension<Directory>({
+    entityType: EntityType.DIRECTORY,
+    fqn: directoryFQN,
+    activeTab,
+    fetcher: (fqn, params) =>
+      getDriveAssetByFqn<Directory>(fqn, EntityType.DIRECTORY, params.fields),
+    onResolve: (extension) =>
+      setDirectoryDetails((prev) => ({ ...prev, extension })),
+  });
   const [isLoading, setLoading] = useState<boolean>(true);
   const [isError, setIsError] = useState(false);
 

openmetadata-ui/src/main/resources/ui/src/pages/MlModelPage/MlModelPage.component.tsx

@@ -28,13 +28,19 @@ import { usePermissionProvider } from '../../context/PermissionProvider/Permissi
 import { ResourceEntity } from '../../context/PermissionProvider/PermissionProvider.interface';
 import { ClientErrors } from '../../enums/Axios.enum';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
-import { EntityType, TabSpecificField } from '../../enums/entity.enum';
+import {
+  EntityTabs,
+  EntityType,
+  TabSpecificField,
+} from '../../enums/entity.enum';
 import { Mlmodel } from '../../generated/entity/data/mlmodel';
 import { Operation as PermissionOperation } from '../../generated/entity/policies/accessControl/resourcePermission';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import { useFqn } from '../../hooks/useFqn';
+import { useLazyEntityExtension } from '../../hooks/useLazyEntityExtension';
 import {
   addFollower,
+  getMlModelByFQN,
   patchMlModelDetails,
   removeFollower,
   updateMlModelVotes,
@@ -55,13 +61,15 @@ import {
 } from '../../utils/PermissionsUtils';
 import { getVersionPath } from '../../utils/RouterUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
+import { useRequiredParams } from '../../utils/useRequiredParams';
 
 const MlModelPage = () => {
   const { t } = useTranslation();
   const { currentUser } = useApplicationStore();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { entityFqn: mlModelFqn } = useFqn({ type: EntityType.MLMODEL });
+  const { tab: activeTab } = useRequiredParams<{ tab: EntityTabs }>();
   const USERId = currentUser?.id ?? '';
 
   const [permissionsLoading, setPermissionsLoading] = useState<boolean>(true);
@@ -157,6 +165,16 @@ const MlModelPage = () => {
     [queryClient, mlModelCacheKey]
   );
 
+  // Lazy custom-properties fetch — see {@link useLazyEntityExtension}.
+  useLazyEntityExtension<Mlmodel>({
+    entityType: EntityType.MLMODEL,
+    fqn: mlModelFqn,
+    activeTab,
+    fetcher: getMlModelByFQN,
+    onResolve: (extension) =>
+      setMlModelDetail((prev) => (prev ? { ...prev, extension } : prev)),
+  });
+
   const { mlModelId, followers } = useMemo(() => {
     return {
       mlModelId: mlModelDetail?.id,

openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx

@@ -28,14 +28,20 @@ import { usePermissionProvider } from '../../context/PermissionProvider/Permissi
 import { ResourceEntity } from '../../context/PermissionProvider/PermissionProvider.interface';
 import { ClientErrors } from '../../enums/Axios.enum';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
-import { EntityType, TabSpecificField } from '../../enums/entity.enum';
+import {
+  EntityTabs,
+  EntityType,
+  TabSpecificField,
+} from '../../enums/entity.enum';
 import { Pipeline } from '../../generated/entity/data/pipeline';
 import { Operation as PermissionOperation } from '../../generated/entity/policies/accessControl/resourcePermission';
 import { Paging } from '../../generated/type/paging';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import { useFqn } from '../../hooks/useFqn';
+import { useLazyEntityExtension } from '../../hooks/useLazyEntityExtension';
 import {
   addFollower,
+  getPipelineByFqn,
   patchPipelineDetails,
   removeFollower,
   updatePipelinesVotes,
@@ -56,6 +62,7 @@ import {
 import { defaultFields } from '../../utils/PipelineDetailsUtils';
 import { getVersionPath } from '../../utils/RouterUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
+import { useRequiredParams } from '../../utils/useRequiredParams';
 
 const PipelineDetailsPage = () => {
   const { t } = useTranslation();
@@ -67,6 +74,7 @@ const PipelineDetailsPage = () => {
   const { entityFqn: decodedPipelineFQN } = useFqn({
     type: EntityType.PIPELINE,
   });
+  const { tab: activeTab } = useRequiredParams<{ tab: EntityTabs }>();
 
   const [permissionsLoading, setPermissionsLoading] = useState<boolean>(true);
   const [paging] = useState<Paging>({} as Paging);
@@ -172,6 +180,16 @@ const PipelineDetailsPage = () => {
     [queryClient, pipelineCacheKey]
   );
 
+  // Lazy custom-properties fetch — see {@link useLazyEntityExtension}.
+  useLazyEntityExtension<Pipeline>({
+    entityType: EntityType.PIPELINE,
+    fqn: decodedPipelineFQN,
+    activeTab,
+    fetcher: getPipelineByFqn,
+    onResolve: (extension) =>
+      setPipelineDetails((prev) => (prev ? { ...prev, extension } : prev)),
+  });
+
   const { pipelineId, currentVersion, followers } = useMemo(() => {
     return {
       pipelineId: pipelineDetails?.id,

openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.test.tsx

@@ -220,8 +220,7 @@ describe('SearchIndexDetailsPage component', () => {
         expect(getSearchIndexDetailsByFQN).toHaveBeenCalledWith(
           'test-service.test-search-index',
           {
-            fields:
-              'fields,followers,tags,owners,domains,votes,dataProducts,extension',
+            fields: 'fields,followers,tags,owners,domains,votes,dataProducts',
           }
         );
       },
@@ -245,8 +244,7 @@ describe('SearchIndexDetailsPage component', () => {
         expect(getSearchIndexDetailsByFQN).toHaveBeenCalledWith(
           'test-service.test-search-index',
           {
-            fields:
-              'fields,followers,tags,owners,domains,votes,dataProducts,extension',
+            fields: 'fields,followers,tags,owners,domains,votes,dataProducts',
           }
         );
       },
@@ -275,8 +273,7 @@ describe('SearchIndexDetailsPage component', () => {
         expect(getSearchIndexDetailsByFQN).toHaveBeenCalledWith(
           'test-service.test-search-index',
           {
-            fields:
-              'fields,followers,tags,owners,domains,votes,dataProducts,extension',
+            fields: 'fields,followers,tags,owners,domains,votes,dataProducts',
           }
         );
       },

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

@@ -46,13 +46,15 @@ import LimitWrapper from '../../hoc/LimitWrapper';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import { useCustomPages } from '../../hooks/useCustomPages';
 import { useFqn } from '../../hooks/useFqn';
+import { useLazyEntityExtension } from '../../hooks/useLazyEntityExtension';
 import { FeedCounts } from '../../interface/feed.interface';
 import {
   searchIndexQueryFn,
   searchIndexQueryKey,
 } from '../../rest/queries/searchIndexQuery';
 import {
   addFollower,
+  getSearchIndexDetailsByFQN,
   patchSearchIndexDetails,
   removeFollower,
   restoreSearchIndex,
@@ -163,6 +165,16 @@ function SearchIndexDetailsPage() {
     [queryClient, searchIndexCacheKey]
   );
 
+  // Lazy custom-properties fetch — see {@link useLazyEntityExtension}.
+  useLazyEntityExtension<SearchIndex>({
+    entityType: EntityType.SEARCH_INDEX,
+    fqn: decodedSearchIndexFQN,
+    activeTab,
+    fetcher: getSearchIndexDetailsByFQN,
+    onResolve: (extension) =>
+      setSearchIndexDetails((prev) => (prev ? { ...prev, extension } : prev)),
+  });
+
   const {
     searchIndexTags,
     owners,