From 5a8bd2cae5be55bb0d9f4e1309d6248fac11bb15 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 11 Jul 2022 11:29:39 +0200
Subject: [PATCH] fix(ui): fix textelipsis comp style computing loop

---
 .../Session_/EventsBlock/EventGroupWrapper.js |  3 +-
 .../ui/TextEllipsis/TextEllipsis.js           | 32 +++++++++++--------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
index 4e685ba14..c68dac880 100644
--- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
+++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
@@ -46,6 +46,7 @@ class EventGroupWrapper extends React.PureComponent {
     const isLocation = event.type === TYPES.LOCATION;
 
     const whiteBg = isLastInGroup && event.type !== TYPES.LOCATION || (!isLastEvent && event.type !== TYPES.LOCATION)
+    const safeRef = String(event.referrer || '');
     return (
       <div
         className={
@@ -59,7 +60,7 @@ class EventGroupWrapper extends React.PureComponent {
         { isFirst && isLocation && event.referrer &&
           <div className={ stl.referrer }>
             <TextEllipsis>
-              Referrer: <span className={stl.url}>{ event.referrer }</span>
+              Referrer: <span className={stl.url}>{safeRef}</span>
             </TextEllipsis>
           </div>
         }
diff --git a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
index 584cb323b..036d12d46 100644
--- a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
+++ b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
@@ -5,12 +5,12 @@ import { Popup } from 'UI';
 import styles from './textEllipsis.module.css';
 
 /** calculates text width in pixels 
-+ * by creating a hidden element with t
-+ * ext and counting its width
-+ * @param text String - text string
-+ * @param fontProp String - font properties
-+ * @returns width number
-+ */
+ * by creating a hidden element with
+ * text and counting its width
+ * @param text String - text string
+ * @param fontProp String - font properties
+ * @returns width number
+ */
 function findTextWidth(text, fontProp) {
 	const tag = document.createElement('div')
 
@@ -51,21 +51,27 @@ const TextEllipsis = ({
 	...props 
 }) => {
 	const [showPopup, setShowPopup] = useState(false)
+	const [computed, setComputed] = useState(false)
 	const textRef = useRef(null);
 
 	const textOrChildren = text || children;
 	
-	const popupId = (Math.random() + 1).toString(36).substring(7);
+	const popupId = (Math.random() + 1).toString(36).substring(2);
 
 	useEffect(() => {
-		const element = textRef.current;
+		if (computed) return;
+		if (textRef.current) {
+			const element = textRef.current;
 
-		const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
+			const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
+			
+			const textWidth = findTextWidth(element.innerText, fontSize)
+			if (textWidth > element.clientWidth) setShowPopup(true)
+			else setShowPopup(false)
+			setComputed(true)
+		}
 		
-		const textWidth = findTextWidth(element.innerText, fontSize)
-		if (textWidth > element.clientWidth) setShowPopup(true)
-		else setShowPopup(false)
-	}, [textRef.current])
+	}, [textRef.current, computed])
 
 	if (noHint || !showPopup) return (
 		<Trigger