Fix tracks table loading one track at a time PAY-1868 PAY-1873

packages/web/src/components/table/Table.tsx

@@ -12,18 +12,18 @@ import cn from 'classnames'
 import { debounce, range } from 'lodash'
 import moment from 'moment'
 import {
- useTable,
- useSortBy,
- useResizeColumns,
- useFlexLayout,
  Cell,
  Row,
- TableRowProps
+ TableRowProps,
+ useFlexLayout,
+ useResizeColumns,
+ useSortBy,
+ useTable
 } from 'react-table'
 import {
  AutoSizer,
- List,
  InfiniteLoader,
+ List,
  WindowScroller
 } from 'react-virtualized'
 
@@ -131,10 +131,17 @@ export const Table = ({
  scrollRef,
  showMoreLimit,
  tableClassName,
- totalRowCount = 9999,
+ totalRowCount,
  useLocalSort = false,
  wrapperClassName
 }: TableProps) => {
+ useEffect(() => {
+ if (totalRowCount == null && isPaginated) {
+ console.error(
+ 'Programming error - need to specify the `totalRowCount` if using paginated Table component (i.e .if `isPaginated` is `true`)'
+ )
+ }
+ }, [isPaginated, totalRowCount])
  const defaultColumn = useMemo(
  () => ({
  // Default resizing column props
@@ -152,6 +159,9 @@ export const Table = ({
  // Pagination page
  const [currentPage, setCurrentPage] = useState<number>(0)
  const maxPage = useMemo(() => {
+ if (totalRowCount == null) {
+ return 0
+ }
  return Math.floor(totalRowCount / pageSize)
  }, [pageSize, totalRowCount])
 
@@ -518,20 +528,14 @@ export const Table = ({
  // TODO: This is supposed to return a promise that resolves when the row data has been fetched.
  // It currently does not, but there are no issues with this currently so will fix if issues pop up
  const loadMoreRows = useCallback(
- async ({
- startIndex,
- stopIndex
- }: {
- startIndex: number
- stopIndex: number
- }) => {
+ async ({ startIndex }: { startIndex: number }) => {
  if (!debouncedFetchMore) return null
  const offset = startIndex
- const limit = stopIndex - startIndex + 1
+ const limit = fetchBatchSize
  debouncedFetchMore(offset, limit)
  return null
  },
- [debouncedFetchMore]
+ [debouncedFetchMore, fetchBatchSize]
  )
 
  const isRowLoaded = useCallback(
@@ -658,7 +662,7 @@ export const Table = ({
  <InfiniteLoader
  isRowLoaded={isRowLoaded}
  loadMoreRows={loadMoreRows}
- rowCount={totalRowCount}
+ rowCount={totalRowCount == null ? rows.length : totalRowCount}
  threshold={fetchThreshold}
  minimumBatchSize={fetchBatchSize}
  >
@@ -702,7 +706,9 @@ export const Table = ({
  ref={registerListChild}
  overscanRowsCount={2}
  rowCount={
- debouncedFetchMore ? totalRowCount : rows.length
+ debouncedFetchMore && totalRowCount != null
+ ? totalRowCount
+ : rows.length
  }
  rowHeight={64}
  rowRenderer={renderRow}

packages/web/src/pages/saved-page/SavedPageProvider.tsx

@@ -1,37 +1,36 @@
 import { ComponentType, PureComponent } from 'react'
 
 import {
- ID,
- UID,
- RepostSource,
  FavoriteSource,
- PlaybackSource,
+ ID,
+ LibraryCategoryType,
+ LineupTrack,
  Name,
- accountSelectors,
- accountActions,
- lineupSelectors,
- savedPageTracksLineupActions as tracksActions,
- savedPageActions as saveActions,
- savedPageSelectors,
+ PlaybackSource,
  SavedPageTabs as ProfileTabs,
+ RepostSource,
+ SavedPageCollection,
+ SavedPageTabs,
  SavedPageTrack,
  TrackRecord,
- SavedPageCollection,
- tracksSocialActions as socialActions,
+ UID,
+ accountActions,
+ accountSelectors,
+ lineupSelectors,
  playerSelectors,
- queueSelectors,
- Kind,
- LineupTrack,
  playlistUpdatesActions,
  playlistUpdatesSelectors,
- LibraryCategoryType,
- SavedPageTabs
+ queueSelectors,
+ savedPageActions as saveActions,
+ savedPageSelectors,
+ tracksSocialActions as socialActions,
+ savedPageTracksLineupActions as tracksActions
 } from '@audius/common'
 import { full } from '@audius/sdk'
 import { push as pushRoute } from 'connected-react-router'
 import { debounce, isEqual } from 'lodash'
 import { connect } from 'react-redux'
-import { withRouter, RouteComponentProps } from 'react-router-dom'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { Dispatch } from 'redux'
 
 import { TrackEvent, make } from 'common/store/analytics/actions'
@@ -148,17 +147,15 @@ class SavedPage extends PureComponent<SavedPageProps, SavedPageState> {
  componentDidUpdate(prevProps: SavedPageProps) {
  const { tracksCategory: prevTracksCategory } = prevProps
  const { tracks, tracksCategory } = this.props
- const allTracksFetched = tracks.entries.every(
- (track) => track.kind === Kind.TRACKS
- )
+ const hasReachedEnd = this.props.hasReachedEnd
 
  if (
-allTracksFetched &&
+hasReachedEnd &&
  !this.state.allTracksFetched &&
  !this.state.filterText
  ) {
  this.setState({ allTracksFetched: true })
- } else if (!allTracksFetched && this.state.allTracksFetched) {
+ } else if (!hasReachedEnd && this.state.allTracksFetched) {
  this.setState({ allTracksFetched: false })
  }
 
@@ -499,6 +496,7 @@ class SavedPage extends PureComponent<SavedPageProps, SavedPageState> {
  }
 
  const desktopProps = {
+ hasReachedEnd: this.props.hasReachedEnd,
  onClickRow: this.onClickRow,
  onClickSave: this.onClickSave,
  onClickTrackName: this.onClickTrackName,

packages/web/src/pages/saved-page/components/desktop/SavedPage.tsx

@@ -3,6 +3,7 @@ import { useContext } from 'react'
 import {
  CommonState,
  ID,
+ Kind,
  LibraryCategory,
  Lineup,
  QueueItem,
@@ -63,6 +64,7 @@ export type SavedPageProps = {
  description: string
  onFilterChange: (e: any) => void
  onSortChange: (method: string, direction: string) => void
+ hasReachedEnd: boolean
  isQueued: boolean
  playingUid: UID | null
  getFilteredData: (
@@ -111,6 +113,7 @@ const SavedPage = ({
  onFilterChange,
  onSortChange,
  allTracksFetched,
+ hasReachedEnd,
  filterText,
  onChangeTab,
  onClickRow,
@@ -135,9 +138,18 @@ const SavedPage = ({
  }
  })
 
+ const getTracksTableData = (): [SavedPageTrack[], number] => {
+ let [data, playingIndex] = getFilteredData(entries)
+ if (!hasReachedEnd) {
+ // Add in some empty rows to show user that more are loading in
+ data = data.concat(new Array(5).fill({ kind: Kind.EMPTY }))
+ }
+ return [data, playingIndex]
+ }
+
  const [dataSource, playingIndex] =
  status === Status.SUCCESS || entries.length
- ? getFilteredData(entries)
+ ? getTracksTableData()
  : [[], -1]
 
  const isEmpty =
@@ -236,7 +248,7 @@ const SavedPage = ({
  playingIndex={playingIndex}
  scrollRef={mainContentRef}
  useLocalSort={allTracksFetched}
-totalRowCount={dataSource.length}
+fetchBatchSize={50}
  userId={account ? account.user_id : 0}
  />
  ),