diff --git a/packages/web/src/pages/trending-page/components/desktop/WinnersView.tsx b/packages/web/src/pages/trending-page/components/desktop/WinnersView.tsx index 84c21d37ab3..5131c58d3e0 100644 --- a/packages/web/src/pages/trending-page/components/desktop/WinnersView.tsx +++ b/packages/web/src/pages/trending-page/components/desktop/WinnersView.tsx @@ -1,4 +1,4 @@ -import { useEffect, useCallback } from 'react' +import { useCallback, useEffect } from 'react' import { useTrendingWinners } from '@audius/common/api' import { @@ -22,6 +22,10 @@ import EndOfLineup from 'components/lineup/EndOfLineup' import Lineup from 'components/lineup/Lineup' import { useLineupProps } from 'components/lineup/hooks' import { LineupVariant } from 'components/lineup/types' +import { TrackTile as DesktopTrackTile } from 'components/track/desktop/TrackTile' +import { TrackTile as MobileTrackTile } from 'components/track/mobile/TrackTile' +import { TrackTileSize } from 'components/track/types' +import { useIsMobile } from 'hooks/useIsMobile' const { getLineup } = trendingWinnersPageLineupSelectors @@ -95,6 +99,8 @@ export const WinnersView = ({ const lineupProps = useTrendingWinnersLineup( containerRef?.current ?? undefined ) + const isMobile = useIsMobile() + const TrackTileComponent = isMobile ? MobileTrackTile : DesktopTrackTile useEffect(() => { if (tracks && tracks.length > 0) { @@ -191,10 +197,38 @@ export const WinnersView = ({ {isPending ? ( - - {[1, 2, 3, 4, 5].map((i) => ( - - ))} + + {Array(5) + .fill(null) + .map((_, i) => ( + *': { width: '100%', minWidth: 0 } }} + > + {}} + isLoading + hasLoaded={() => {}} + isTrending + isFeed={false} + isActive={false} + noShimmer + /> + + ))} ) : (