LivestreamLink: fix flicker when a child updates

## Ticket
1358 - flicker on livestream tile when viewers updates

## Change
Defining the component that way results in unique Card wrapper on each resolve, so everything gets torn down and re-mounted, causing the flicker.

There is a css side-effect though: the tags changed from red to black. But tags are inconsistent through the app ... sometimes black, sometimes red (I think it should always be red + smaller font from the body).
This commit is contained in:
infinite-persistence 2022-04-21 14:14:48 +08:00 committed by Thomas Zarebczan
parent 126ecd38fa
commit a9a2270ae9

View file

@ -15,7 +15,11 @@ export default function LivestreamLink(props: Props) {
const { claimUri, title = null } = props; const { claimUri, title = null } = props;
const { push } = useHistory(); const { push } = useHistory();
const element = (props: { children: any }) => ( if (!claimUri) {
return null;
}
return (
<Card <Card
className="livestream__channel-link claim-preview__live" className="livestream__channel-link claim-preview__live"
title={title || __('Live stream in progress')} title={title || __('Live stream in progress')}
@ -23,9 +27,7 @@ export default function LivestreamLink(props: Props) {
push(formatLbryUrlForWeb(claimUri)); push(formatLbryUrlForWeb(claimUri));
}} }}
> >
{props.children} <ClaimPreview uri={claimUri} type="inline" hideMenu />
</Card> </Card>
); );
return claimUri ? <ClaimPreview uri={claimUri} wrapperElement={element} type="inline" /> : null;
} }