#RI-5371 - fix loadings

Author: rsergeenko

redisinsight/ui/src/pages/browser/components/browser-left-panel/BrowserLeftPanel.tsx

@@ -67,7 +67,8 @@ const BrowserLeftPanel = (props: Props) => {
 
   const isDataLoaded = searchMode === SearchMode.Pattern ? isDataPatternLoaded : isDataRedisearchLoaded
   const keysState = searchMode === SearchMode.Pattern ? patternKeysState : redisearchKeysState
-  const loading = searchMode === SearchMode.Pattern ? patternLoading : redisearchLoading || redisearchListLoading
+  const loading = searchMode === SearchMode.Pattern ? patternLoading : redisearchLoading
+  const headerLoading = searchMode === SearchMode.Pattern ? patternLoading : redisearchListLoading
   const isSearched = searchMode === SearchMode.Pattern ? patternIsSearched : redisearchIsSearched
   const scrollTopPosition = searchMode === SearchMode.Pattern ? scrollPatternTopPosition : scrollRedisearchTopPosition
   const commonFilterType = searchMode === SearchMode.Pattern ? filter : keysState.keys?.[0]?.type
@@ -123,7 +124,7 @@ const BrowserLeftPanel = (props: Props) => {
     <div className={styles.container}>
       <KeysHeader
         keysState={keysState}
-        loading={loading}
+        loading={headerLoading}
         isSearched={isSearched}
         loadKeys={loadKeys}
         handleScanMoreClick={handleScanMoreClick}

redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx

@@ -85,12 +85,13 @@ const KeyList = forwardRef((props: Props, ref) => {
   const { keyList: { isNotRendered: isNotRenderedContext } } = useSelector(appContextBrowser)
 
   const [, rerender] = useState({})
-  const [firstDataLoaded, setFirstDataLoaded] = useState<boolean>(!!keysState.keys.length)
+  const [firstDataLoaded, setFirstDataLoaded] = useState<boolean>(
+    !!keysState.keys.length || !isNotRenderedContext
+  )
   const [deletePopoverIndex, setDeletePopoverIndex] = useState<Maybe<number>>(undefined)
 
   const controller = useRef<Nullable<AbortController>>(null)
   const itemsRef = useRef(keysState.keys)
-  const isNotRendered = useRef(isNotRenderedContext)
   const renderedRowsIndexesRef = useRef({ startIndex: 0, lastIndex: 0 })
 
   const dispatch = useDispatch()
@@ -108,12 +109,14 @@ const KeyList = forwardRef((props: Props, ref) => {
   useEffect(() => {
     itemsRef.current = [...keysState.keys]
 
-    if (!isNotRendered.current && !loading && keysState.lastRefreshTime) {
+    if (
+      (!firstDataLoaded && keysState.lastRefreshTime)
+      || (searchMode === SearchMode.Redisearch && itemsRef.current.length === 0)
+    ) {
       setFirstDataLoaded(true)
+      dispatch(setBrowserIsNotRendered(false))
     }
 
-    isNotRendered.current = false
-    dispatch(setBrowserIsNotRendered(isNotRendered.current))
     if (itemsRef.current.length === 0) {
       cancelAllMetadataRequests()
       rerender({})
@@ -141,14 +144,6 @@ const KeyList = forwardRef((props: Props, ref) => {
     />
   )
 
-  const getNoItemsMessage = () => {
-    if (isNotRendered.current) {
-      return ''
-    }
-
-    return <NoItemsMessage />
-  }
-
   const onLoadMoreItems = (props: { startIndex: number, stopIndex: number }) => {
     if (searchMode === SearchMode.Redisearch
       && keysState.maxResults
@@ -327,7 +322,7 @@ const KeyList = forwardRef((props: Props, ref) => {
     },
   ]
 
-  const noItemsMessage = getNoItemsMessage()
+  const noItemsMessage = NoItemsMessage()
 
   const VirtualizeTable = () => (
     <VirtualTable

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

@@ -110,7 +110,7 @@ const KeyTree = forwardRef((props: Props, ref) => {
     }
 
     setItems(parseKeyNames(keysState.keys))
-  }, [keysState.lastRefreshTime])
+  }, [keysState.lastRefreshTime, delimiter, sorting])
 
   useEffect(() => {
     openSelectedKey(selectedKeyName)