open-metadata · Rohit0301 · Aug 10, 2026 · Aug 10, 2026 · Aug 10, 2026 · Aug 10, 2026
@@ -21,10 +21,10 @@
 import GlossaryDetails from './GlossaryDetails.component';

 jest.mock('../GlossaryTermTab/GlossaryTermTab.component', () => {
  return jest.fn().mockReturnValue(<p>GlossaryTermTab.component</p>);
 });
 jest.mock('../GlossaryHeader/GlossaryHeader.component', () => {
  return jest.fn().mockReturnValue(<p>GlossaryHeader.component</p>);
 });
 jest.mock('react-router-dom', () => ({
  Link: jest
@@ -44,14 +44,22 @@
  () => ({
    ActivityFeedTab: jest
      .fn()
      .mockImplementation(() => <p>testActivityFeedTab</p>),
  })
 );

 jest.mock('../../common/EntityDescription/Description', () =>
   jest.fn().mockImplementation(() => <div>Description</div>)
 );
 
+jest.mock('../../../hooks/useCustomPages', () => ({
+  useCustomPages: jest.fn().mockReturnValue({
+    customizedPage: null,
+    navigation: null,
+    isLoading: false,
+  }),
+}));
+
 const mockProps = {
   glossary: mockedGlossaries[0],
   glossaryTerms: [],
@@ -84,7 +92,7 @@
 }));

 jest.mock('../../Customization/GenericTab/GenericTab', () => ({
  GenericTab: jest.fn().mockImplementation(() => <div>GenericTab</div>),
 }));

 describe('Test Glossary-details component', () => {

@@ -74,25 +74,25 @@

 jest.mock('react-router-dom', () => ({
  useParams: jest.fn().mockImplementation(() => params),
  Link: jest.fn().mockImplementation(({ children }) => <a>{children}</a>),
  useNavigate: jest.fn().mockReturnValue(jest.fn()),
  useLocation: jest.fn().mockImplementation(() => ({ pathname: 'mockPath' })),
 }));

 jest.mock('./GlossaryDetails/GlossaryDetails.component', () => {
  return jest.fn().mockReturnValue(<>Glossary-Details component</>);
 });

 jest.mock('./GlossaryTerms/GlossaryTermsV1.component', () => {
  return jest.fn().mockReturnValue(<>Glossary-Term component</>);
 });

 jest.mock('../common/TitleBreadcrumb/TitleBreadcrumb.component', () => {
  return jest.fn().mockReturnValue(<>TitleBreadcrumb</>);
 });

 jest.mock('../common/TitleBreadcrumb/TitleBreadcrumb.component', () =>
  jest.fn().mockReturnValue(<div>Breadcrumb</div>)
 );

 jest.mock('../common/ProfilePicture/ProfilePicture', () =>
@@ -130,6 +130,14 @@
   })
 );
 
+jest.mock('../../hooks/useCustomPages', () => ({
+  useCustomPages: jest.fn().mockReturnValue({
+    customizedPage: null,
+    navigation: null,
+    isLoading: false,
+  }),
+}));
+
 const mockProps: GlossaryV1Props = {
   selectedData: mockedGlossaries[0],
   isGlossaryActive: true,

@@ -21,6 +21,14 @@ jest.mock(
   })
 );
 
+jest.mock('../../../hooks/useCustomPages', () => ({
+  useCustomPages: jest.fn().mockReturnValue({
+    customizedPage: null,
+    navigation: null,
+    isLoading: false,
+  }),
+}));
+
 describe('LeftSidebar', () => {
   it('renders sidebar links correctly', () => {
     render(

@@ -10,7 +10,9 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { renderHook } from '@testing-library/react-hooks';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import React from 'react';
 import { Document } from '../generated/entity/docStore/document';
 import { PageType } from '../generated/system/ui/page';
 import { getDocumentByFQN } from '../rest/DocStoreAPI';
@@ -32,7 +34,16 @@ jest.mock('../rest/DocStoreAPI', () => ({
   getDocumentByFQN: jest.fn(),
 }));
 
+const createWrapper = (queryClient: QueryClient) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) =>
+    React.createElement(QueryClientProvider, { client: queryClient }, children);
+
+  return Wrapper;
+};
+
 describe('useCustomPages', () => {
+  let queryClient: QueryClient;
+
   const mockSelectedPersona = {
     fullyQualifiedName: 'test-persona',
   };
@@ -60,6 +71,9 @@ describe('useCustomPages', () => {
   };
 
   beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
     jest.clearAllMocks();
     mockUseApplicationStore.mockReturnValue({
       selectedPersona: mockSelectedPersona,
@@ -69,75 +83,92 @@ describe('useCustomPages', () => {
   it('should fetch and return customized page and navigation when persona is selected', async () => {
     mockGetDocumentByFQN.mockResolvedValue(mockDocument);
 
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useCustomPages(PageType.Table)
-    );
-
-    expect(result.current.isLoading).toBe(true);
+    const { result } = renderHook(() => useCustomPages(PageType.Table), {
+      wrapper: createWrapper(queryClient),
+    });
 
-    await waitForNextUpdate();
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
 
     expect(mockGetDocumentByFQN).toHaveBeenCalledWith('persona.test-persona');
     expect(result.current.customizedPage).toEqual(mockPage);
     expect(result.current.navigation).toEqual(mockNavigation);
-    expect(result.current.isLoading).toBe(false);
   });
 
   it('should handle error when fetching document fails', async () => {
     mockGetDocumentByFQN.mockRejectedValue(new Error('API Error'));
 
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useCustomPages(PageType.Table)
-    );
-
-    expect(result.current.isLoading).toBe(true);
+    const { result } = renderHook(() => useCustomPages(PageType.Table), {
+      wrapper: createWrapper(queryClient),
+    });
 
-    await waitForNextUpdate();
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
 
     expect(mockGetDocumentByFQN).toHaveBeenCalledWith('persona.test-persona');
     expect(result.current.customizedPage).toBeNull();
     expect(result.current.navigation).toEqual([]);
-    expect(result.current.isLoading).toBe(false);
   });
 
-  it('should not fetch document when no persona is selected', () => {
+  it('should not fetch document when no persona is selected', async () => {
     mockUseApplicationStore.mockReturnValue({
       selectedPersona: null,
     });
 
-    const { result } = renderHook(() => useCustomPages(PageType.Table));
+    const { result } = renderHook(() => useCustomPages(PageType.Table), {
+      wrapper: createWrapper(queryClient),
+    });
 
     expect(mockGetDocumentByFQN).not.toHaveBeenCalled();
     expect(result.current.customizedPage).toBeNull();
     expect(result.current.navigation).toBeNull();
-    expect(result.current.isLoading).toBe(false);
+
+    // hasMounted starts false (isLoading = true), flips after the mount effect.
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
   });
 
-  it('should refetch document when pageType changes', async () => {
-    mockGetDocumentByFQN.mockResolvedValue(mockDocument);
+  it('should filter by pageType from cached doc without re-fetching', async () => {
+    const mockDocWithMultiplePages: Document = {
+      ...mockDocument,
+      data: {
+        pages: [
+          { pageType: PageType.Table, tabs: [] },
+          { pageType: PageType.Dashboard, tabs: [] },
+        ],
+        navigation: mockNavigation,
+      },
+    };
+    mockGetDocumentByFQN.mockResolvedValue(mockDocWithMultiplePages);
 
-    const { rerender, waitForNextUpdate } = renderHook(
-      ({ pageType }) => useCustomPages(pageType),
+    const { result, rerender } = renderHook(
+      ({ pageType }: { pageType: PageType }) => useCustomPages(pageType),
       {
         initialProps: { pageType: PageType.Table },
+        wrapper: createWrapper(queryClient),
       }
     );
 
-    await waitForNextUpdate();
+    await waitFor(() => {
+      expect(result.current.customizedPage?.pageType).toBe(PageType.Table);
+    });
 
+    // Changing pageType filters locally from the cached doc — no extra network request.
     expect(mockGetDocumentByFQN).toHaveBeenCalledTimes(1);
 
     rerender({ pageType: PageType.Dashboard });
 
-    await waitForNextUpdate();
-
-    expect(mockGetDocumentByFQN).toHaveBeenCalledTimes(2);
+    expect(mockGetDocumentByFQN).toHaveBeenCalledTimes(1);
+    expect(result.current.customizedPage?.pageType).toBe(PageType.Dashboard);
   });
 
   it('should return updated results when selected persona changes', async () => {
     mockGetDocumentByFQN.mockResolvedValueOnce(mockDocument);
 
-    const { result, waitForNextUpdate, rerender } = renderHook(
+    const { result, rerender } = renderHook(
       ({ selectedPersona }) => {
         mockUseApplicationStore.mockReturnValue({
           selectedPersona,
@@ -149,16 +180,17 @@ describe('useCustomPages', () => {
         initialProps: {
           selectedPersona: { fullyQualifiedName: 'test-persona' },
         },
+        wrapper: createWrapper(queryClient),
       }
     );
 
-    await waitForNextUpdate();
+    await waitFor(() => {
+      expect(result.current.customizedPage).toEqual(mockDocument.data.pages[0]);
+    });
 
     expect(mockGetDocumentByFQN).toHaveBeenCalledWith('persona.test-persona');
-    expect(result.current.customizedPage).toEqual(mockDocument.data.pages[0]);
     expect(result.current.navigation).toEqual(mockDocument.data.navigation);
 
-    // Change the selected persona
     const newPersona = { fullyQualifiedName: 'new-persona' };
     mockGetDocumentByFQN.mockResolvedValueOnce({
       entityType: 'PERSONA',
@@ -172,13 +204,14 @@ describe('useCustomPages', () => {
 
     rerender({ selectedPersona: newPersona });
 
-    await waitForNextUpdate();
+    await waitFor(() => {
+      expect(result.current.customizedPage).toEqual({
+        pageType: PageType.Table,
+        content: 'New Content',
+      });
+    });
 
     expect(mockGetDocumentByFQN).toHaveBeenCalledWith('persona.new-persona');
-    expect(result.current.customizedPage).toEqual({
-      pageType: PageType.Table,
-      content: 'New Content',
-    });
     expect(result.current.navigation).toEqual([{ name: 'New Navigation' }]);
   });
 });
@@ -10,48 +10,52 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { useCallback, useEffect, useState } from 'react';
-import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
-import { EntityType } from '../enums/entity.enum';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import { Page, PageType } from '../generated/system/ui/page';
 import { NavigationItem } from '../generated/system/ui/uiCustomization';
-import { getDocumentByFQN } from '../rest/DocStoreAPI';
+import {
+  docStoreQueryFn,
+  docStoreQueryKey,
+  personaDocFqn,
+  PERSONA_DOC_STALE_TIME,
+} from '../rest/queries/docStoreQuery';
 import { useApplicationStore } from './useApplicationStore';
 
 export const useCustomPages = (pageType: PageType | 'Navigation') => {
   const { selectedPersona } = useApplicationStore();
-  const [customizedPage, setCustomizedPage] = useState<Page | null>(null);
-  const [navigation, setNavigation] = useState<NavigationItem[] | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const fqn = personaDocFqn(selectedPersona);
 
-  const fetchDocument = useCallback(async () => {
-    const pageFQN = `${EntityType.PERSONA}${FQN_SEPARATOR_CHAR}${selectedPersona?.fullyQualifiedName}`;
-    try {
-      const doc = await getDocumentByFQN(pageFQN);
-      setCustomizedPage(
-        doc.data?.pages?.find((p: Page | null) => p?.pageType === pageType)
-      );
-      setNavigation(doc.data?.navigation);
-    } catch (error) {
-      // Need to reset Navigation to avoid showing old navigation items
-      setNavigation([]);
-      setCustomizedPage(null);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [selectedPersona?.fullyQualifiedName, pageType]);
+  const { data: doc, isError } = useQuery({
+    queryKey: docStoreQueryKey(fqn ?? ''),
+    queryFn: docStoreQueryFn(fqn ?? ''),
+    enabled: !!fqn,
+    retry: false,
+    staleTime: PERSONA_DOC_STALE_TIME,
+  });
 
+  // hasMounted flips once after the first paint so entity pages always show
+  // their loader on first render — identical to the old useState(true) pattern.
+  // Without this, selectedPersona arrives asynchronously after first render,
+  // causing isLoading to flip false→true→false in a window where
+  // waitForAllLoadersToDisappear may have already returned.
+  const [hasMounted, setHasMounted] = useState(false);
   useEffect(() => {
-    if (selectedPersona?.fullyQualifiedName) {
-      fetchDocument();
-    } else {
-      setIsLoading(false);
-    }
-  }, [selectedPersona, pageType]);
+    setHasMounted(true);
+  }, []);
 
   return {
-    customizedPage,
-    navigation,
-    isLoading,
+    customizedPage:
+      (doc?.data?.pages?.find((p: Page | null) => p?.pageType === pageType) as
+        | Page
+        | undefined) ?? null,
+    // Reset to [] on error to clear stale navigation items, null when no persona selected.
+    navigation: isError
+      ? ([] as NavigationItem[])
+      : ((doc?.data?.navigation ?? null) as NavigationItem[] | null),
+    // Only block render on the very first paint. The persona doc fetches in the
+    // background after that; customizedPage/navigation update when it arrives
+    // without re-showing a loader (matches the old fetchDocument behaviour).
+    isLoading: !hasMounted,
   };
 };