fix(ui/browse): Fix bug where browse would not paginate when leaving a nested container (#14483)

datahub-web-react/src/app/searchV2/sidebar/BrowseNode.tsx

@@ -1,4 +1,5 @@
 import { FolderOutlined } from '@ant-design/icons';
+import { Loader } from '@components';
 import { Typography } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
@@ -71,7 +72,7 @@ const BrowseNode = () => {
         trackSelectNodeEvent(isNowSelected ? 'select' : 'deselect', 'browse');
     };
 
-    const { error, groups, loaded, observable, path, retry } = useBrowsePagination({
+    const { error, groups, loading, loaded, observable, path, retry } = useBrowsePagination({
         skip: !isOpen || !browseResultGroup.hasSubGroups,
     });
 
@@ -118,6 +119,7 @@ const BrowseNode = () => {
                             <BrowseNode />
                         </BrowseProvider>
                     ))}
+                    {loading && <Loader size="sm" />}
                     {error && <SidebarLoadingError onClickRetry={retry} />}
                     {observable}
                 </ExpandableNode.Body>

datahub-web-react/src/app/searchV2/sidebar/PlatformNode.tsx

@@ -1,3 +1,4 @@
+import { Loader } from '@components';
 import { Typography } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
@@ -82,7 +83,7 @@ const PlatformNode = ({ iconSize = 20, hasOnlyOnePlatform = false, toggleCollaps
         trackSelectNodeEvent(isNowPlatformOnlySelected ? 'select' : 'deselect', 'platform');
     };
 
-    const { error, groups, loaded, observable, path, retry } = useBrowsePagination({ skip: !isOpen });
+    const { error, groups, loading, loaded, observable, path, retry } = useBrowsePagination({ skip: !isOpen });
 
     const color = REDESIGN_COLORS.TEXT_HEADING;
 
@@ -169,6 +170,7 @@ const PlatformNode = ({ iconSize = 20, hasOnlyOnePlatform = false, toggleCollaps
                             <BrowseNode />
                         </BrowseProvider>
                     ))}
+                    {loading && <Loader size="sm" />}
                     {error && <SidebarLoadingError onClickRetry={retry} />}
                     {observable}
                 </ExpandableNode.Body>

datahub-web-react/src/app/searchV2/sidebar/useBrowsePagination.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { useBrowsePath, useEntityType } from '@app/searchV2/sidebar/BrowseContext';
 import { BROWSE_LOAD_MORE_MARGIN, BROWSE_PAGE_SIZE } from '@app/searchV2/sidebar/constants';
 import { useSidebarFilters } from '@app/searchV2/sidebar/useSidebarFilters';
 import useIntersect from '@app/shared/useIntersect';
 
-import { GetBrowseResultsV2Query, useGetBrowseResultsV2LazyQuery } from '@graphql/browseV2.generated';
+import { GetBrowseResultsV2Query, useGetBrowseResultsV2Query } from '@graphql/browseV2.generated';
 
 type Props = {
     skip: boolean;
@@ -33,18 +33,10 @@ const useBrowsePagination = ({ skip }: Props) => {
     const total = latestData?.browseV2?.total ?? -1;
     const done = !!latestData && groups.length >= total;
 
-    const [getBrowseResultsV2, { data, error, refetch }] = useGetBrowseResultsV2LazyQuery({
+    const [start, setStart] = useState(0);
+    const { loading, error, refetch } = useGetBrowseResultsV2Query({
+        skip,
         fetchPolicy: 'cache-first',
-    });
-
-    const retry = () => {
-        if (refetch) refetch();
-    };
-
-    const getBrowseResultsV2WithDeps = useCallback(
-        (start: number) => {
-            if (skip) return;
-            getBrowseResultsV2({
         variables: {
             input: {
                 type,
@@ -56,17 +48,7 @@ const useBrowsePagination = ({ skip }: Props) => {
                 query: sidebarFilters.query,
             },
         },
-            });
+        onCompleted: (data) => {
-        },
-        [getBrowseResultsV2, path, sidebarFilters.orFilters, sidebarFilters.query, sidebarFilters.viewUrn, skip, type],
-    );
-
-    useEffect(() => {
-        initializing.current = true;
-        getBrowseResultsV2WithDeps(0);
-    }, [getBrowseResultsV2WithDeps]);
-
-    useEffect(() => {
             const newStart = data?.browseV2?.start ?? -1;
             if (newStart === 0) initializing.current = false;
             if (initializing.current || !data || newStart < 0) return;
@@ -82,13 +64,18 @@ const useBrowsePagination = ({ skip }: Props) => {
 
                 return newMap;
             });
-    }, [data]);
+        },
+    });
+
+    const retry = () => {
+        if (refetch) refetch();
+    };
 
     const advancePage = useCallback(() => {
         const newStart = latestStart + BROWSE_PAGE_SIZE;
         if (initializing.current || error || done || latestStart < 0 || total <= 0 || newStart >= total) return;
-        getBrowseResultsV2WithDeps(newStart);
+        setStart(newStart);
-    }, [done, error, getBrowseResultsV2WithDeps, latestStart, total]);
+    }, [done, error, latestStart, total]);
 
     const { observableRef } = useIntersect({
         skip,
@@ -97,6 +84,7 @@ const useBrowsePagination = ({ skip }: Props) => {
     });
 
     return {
+        loading: start > 0 && loading, // Don't display loading indicator for first page
         loaded: !!latestData || !!error,
         error,
         groups,