diff --git a/datahub-web-react/src/app/searchV2/sidebar/BrowseNode.tsx b/datahub-web-react/src/app/searchV2/sidebar/BrowseNode.tsx index 635ff6722d..f5393394ba 100644 --- a/datahub-web-react/src/app/searchV2/sidebar/BrowseNode.tsx +++ b/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 = () => { ))} + {loading && } {error && } {observable} diff --git a/datahub-web-react/src/app/searchV2/sidebar/PlatformNode.tsx b/datahub-web-react/src/app/searchV2/sidebar/PlatformNode.tsx index 6ab8d8ce7b..c9eb8b22e1 100644 --- a/datahub-web-react/src/app/searchV2/sidebar/PlatformNode.tsx +++ b/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 ))} + {loading && } {error && } {observable} diff --git a/datahub-web-react/src/app/searchV2/sidebar/useBrowsePagination.tsx b/datahub-web-react/src/app/searchV2/sidebar/useBrowsePagination.tsx index 879b083161..7b75d09da1 100644 --- a/datahub-web-react/src/app/searchV2/sidebar/useBrowsePagination.tsx +++ b/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,62 +33,49 @@ 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', + variables: { + input: { + type, + path, + start, + count: BROWSE_PAGE_SIZE, + orFilters: sidebarFilters.orFilters, + viewUrn: sidebarFilters.viewUrn, + query: sidebarFilters.query, + }, + }, + onCompleted: (data) => { + const newStart = data?.browseV2?.start ?? -1; + if (newStart === 0) initializing.current = false; + if (initializing.current || !data || newStart < 0) return; + + setStartToBrowseMap((previousMap) => { + const newMap: typeof previousMap = { [newStart]: data }; + + Object.keys(previousMap) + .map(Number) + .forEach((previousStart) => { + if (previousStart < newStart) newMap[previousStart] = previousMap[previousStart]; + }); + + return newMap; + }); + }, }); const retry = () => { if (refetch) refetch(); }; - const getBrowseResultsV2WithDeps = useCallback( - (start: number) => { - if (skip) return; - getBrowseResultsV2({ - variables: { - input: { - type, - path, - start, - count: BROWSE_PAGE_SIZE, - orFilters: sidebarFilters.orFilters, - viewUrn: sidebarFilters.viewUrn, - query: sidebarFilters.query, - }, - }, - }); - }, - [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; - - setStartToBrowseMap((previousMap) => { - const newMap: typeof previousMap = { [newStart]: data }; - - Object.keys(previousMap) - .map(Number) - .forEach((previousStart) => { - if (previousStart < newStart) newMap[previousStart] = previousMap[previousStart]; - }); - - return newMap; - }); - }, [data]); - const advancePage = useCallback(() => { const newStart = latestStart + BROWSE_PAGE_SIZE; if (initializing.current || error || done || latestStart < 0 || total <= 0 || newStart >= total) return; - getBrowseResultsV2WithDeps(newStart); - }, [done, error, getBrowseResultsV2WithDeps, latestStart, total]); + setStart(newStart); + }, [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,