diff --git a/ui/component/channelContent/index.js b/ui/component/channelContent/index.js index e7a7a8d66..9c6eb76d8 100644 --- a/ui/component/channelContent/index.js +++ b/ui/component/channelContent/index.js @@ -6,6 +6,7 @@ import { makeSelectClaimIsMine, makeSelectTotalPagesInChannelSearch, makeSelectClaimForUri, + doResolveUris, SETTINGS, } from 'lbry-redux'; import { makeSelectChannelIsMuted } from 'redux/selectors/blocked'; @@ -32,4 +33,8 @@ const select = (state, props) => { }; }; -export default withRouter(connect(select)(ChannelPage)); +const perform = (dispatch) => ({ + doResolveUris: (uris) => dispatch(doResolveUris(uris)), +}); + +export default withRouter(connect(select, perform)(ChannelPage)); diff --git a/ui/component/channelContent/view.jsx b/ui/component/channelContent/view.jsx index e9a42d310..3ae6ea88d 100644 --- a/ui/component/channelContent/view.jsx +++ b/ui/component/channelContent/view.jsx @@ -30,6 +30,7 @@ type Props = { showMature: boolean, tileLayout: boolean, viewHiddenChannels: boolean, + doResolveUris: (Array, boolean) => void, }; function ChannelContent(props: Props) { @@ -46,6 +47,7 @@ function ChannelContent(props: Props) { showMature, tileLayout, viewHiddenChannels, + doResolveUris, } = props; const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; const [searchQuery, setSearchQuery] = React.useState(''); @@ -78,6 +80,11 @@ function ChannelContent(props: Props) { return `lbry://${name}#${claimId}`; }); + // Batch-resolve the urls before calling 'setSearchResults', as the + // latter will immediately cause the tiles to resolve, ending up + // calling doResolveUri one by one before the batched one. + doResolveUris(urls, true); + setSearchResults(urls); }) .catch(() => {