From 813cf91a1dc4a65258cd966b5a3ead1978b76782 Mon Sep 17 00:00:00 2001
From: Radu Mojic <radu.mojic@multiversx.com>
Date: Thu, 14 Dec 2023 14:50:24 +0200
Subject: [PATCH] fix flicker on safari

---
 .../components/TransactionMethod.tsx          | 31 ++++++++++---------
 src/helpers/isEllipsisActive.ts               |  2 +-
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/TransactionsTable/components/TransactionMethod.tsx b/src/components/TransactionsTable/components/TransactionMethod.tsx
index 5c266c23c..a85f6d0db 100644
--- a/src/components/TransactionsTable/components/TransactionMethod.tsx
+++ b/src/components/TransactionsTable/components/TransactionMethod.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef, useState, useLayoutEffect } from 'react';
 import classNames from 'classnames';
 import { useSearchParams } from 'react-router-dom';
 
@@ -13,8 +13,15 @@ export interface TransactionMethodType {
 export const TransactionMethod = ({ transaction }: TransactionMethodType) => {
   const badgeTextRef = useRef(null);
   const [searchParams, setSearchParams] = useSearchParams();
+  const [isTextTruncated, setIsTextTruncated] = useState(false);
   const { function: filteredFunction } = Object.fromEntries(searchParams);
 
+  useLayoutEffect(() => {
+    if (badgeTextRef?.current) {
+      setIsTextTruncated(isEllipsisActive(badgeTextRef?.current));
+    }
+  }, []);
+
   const transactionMethodText = getTransactionMethod(transaction);
   if (!transactionMethodText) {
     return null;
@@ -24,8 +31,7 @@ export const TransactionMethod = ({ transaction }: TransactionMethodType) => {
     transaction.action?.description &&
       transaction.action.description !== 'Transfer'
   );
-  const showTooltip =
-    isEllipsisActive(badgeTextRef?.current) || showDescription;
+  const showTooltip = showDescription || isTextTruncated;
 
   const updateMethod = (method: string) => {
     const { page, size, ...rest } = Object.fromEntries(searchParams);
@@ -81,11 +87,11 @@ export const TransactionMethod = ({ transaction }: TransactionMethodType) => {
     </div>
   );
 
-  const TransactionMethodTooltip = () => {
-    if (showTooltip) {
-      return (
+  return showTooltip ? (
+    <Overlay
+      title={
         <>
-          {isEllipsisActive(badgeTextRef?.current) && (
+          {isTextTruncated && (
             <p className={classNames({ 'mb-0': !showDescription })}>
               {transactionMethodText}
             </p>
@@ -94,14 +100,9 @@ export const TransactionMethod = ({ transaction }: TransactionMethodType) => {
             <p className='mb-0'>{transaction.action?.description}</p>
           )}
         </>
-      );
-    }
-
-    return null;
-  };
-
-  return showTooltip ? (
-    <Overlay title={<TransactionMethodTooltip />} className='method-tooltip'>
+      }
+      className='method-tooltip'
+    >
       <TransactionMethodBadge />
     </Overlay>
   ) : (
diff --git a/src/helpers/isEllipsisActive.ts b/src/helpers/isEllipsisActive.ts
index 8b31beded..9650d7095 100644
--- a/src/helpers/isEllipsisActive.ts
+++ b/src/helpers/isEllipsisActive.ts
@@ -7,5 +7,5 @@ export const isEllipsisActive = (e?: HTMLDivElement | null) => {
     }
   }
 
-  return false;
+  return true;
 };