Merge pull request #2875 from RedisInsight/fe/bugfix/RI-5265-performance-issues

#RI-5265 - fix performance issues

Author: vlad-dargel

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -189,7 +189,7 @@ const BrowserPage = () => {
     }))
   }
 
-  const selectKey = ({ rowData }: { rowData: any }) => {
+  const selectKey = useCallback(({ rowData }: { rowData: any }) => {
     if (!isEqualBuffers(rowData.name, selectedKeyRef.current)) {
       dispatch(toggleBrowserFullScreen(false))
 
@@ -198,7 +198,7 @@ const BrowserPage = () => {
       closeRightPanels()
       prevSelectedType.current = rowData.type
     }
-  }
+  }, [])
 
   const closePanel = () => {
     dispatch(toggleBrowserFullScreen(true))

redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx

@@ -212,4 +212,4 @@ const KeyTree = forwardRef((props: Props, ref) => {
   )
 })
 
-export default KeyTree
+export default React.memo(KeyTree)

redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { EuiIcon, EuiTitle, EuiText, EuiSpacer, EuiButton } from '@elastic/eui'
+import { EuiTitle, EuiText, EuiSpacer, EuiButton, EuiImage } from '@elastic/eui'
 import { useDispatch } from 'react-redux'
 
 import { setBulkActionType } from 'uiSrc/slices/browser/bulkActions'
@@ -29,10 +29,10 @@ const NoKeysFound = (props: Props) => {
 
   return (
     <div className={styles.container} data-testid="no-result-found-msg">
-      <EuiIcon
+      <EuiImage
         className={styles.img}
-        type={theme === Theme.Dark ? TelescopeDark : TelescopeLight}
-        size="original"
+        src={theme === Theme.Dark ? TelescopeDark : TelescopeLight}
+        alt="no results image"
       />
       <EuiSpacer size="l" />
       <EuiText>No Keys Found</EuiText>

redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx

@@ -6,7 +6,7 @@ import {
   TreeWalkerValue,
   FixedSizeTree as Tree,
 } from 'react-vtree'
-import { EuiIcon, EuiLoadingSpinner, EuiProgress } from '@elastic/eui'
+import { EuiIcon, EuiImage, EuiLoadingSpinner, EuiProgress } from '@elastic/eui'
 import { useDispatch } from 'react-redux'
 
 import { bufferToString, Maybe, Nullable } from 'uiSrc/utils'
@@ -276,7 +276,15 @@ const VirtualTree = (props: Props) => {
             <div className={styles.loadingContainer} style={{ width, height }} data-testid="virtual-tree-spinner">
               <div className={styles.loadingBody}>
                 <EuiLoadingSpinner size="xl" className={styles.loadingSpinner} />
-                <EuiIcon type={loadingIcon || 'empty'} className={styles.loadingIcon} />
+                {loadingIcon ? (
+                  <EuiImage
+                    className={styles.loadingIcon}
+                    src={loadingIcon}
+                    alt="loading"
+                  />
+                ) : (
+                  <EuiIcon type="empty" className={styles.loadingIcon} />
+                )}
               </div>
             </div>
           )}

redisinsight/ui/src/pages/browser/components/virtual-tree/styles.module.scss

@@ -30,7 +30,7 @@
 }
 
 .loadingIcon {
-  position: absolute;
+  position: absolute !important;
   width: 28px !important;
   height: 28px !important;
   top: 12px;