From a9a2270ae9a6fd9ef6d3ee5d431a7fe48105b92a Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Thu, 21 Apr 2022 14:14:48 +0800
Subject: [PATCH] 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).
---
 ui/component/livestreamLink/view.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

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