#RI-5371 - fix loading

Author: rsergeenko

redisinsight/ui/src/constants/texts.tsx

@@ -9,6 +9,13 @@ export const NoResultsFoundText = (
     No results found.
   </EuiText>
 )
+
+export const LoadingText = (
+  <EuiText size="m" data-testid="loading-keys" style={{ lineHeight: 1.4 }}>
+    loading...
+  </EuiText>
+)
+
 export const NoSelectedIndexText = (
   <EuiText size="m" data-testid="no-result-select-index">
     Select an index and enter a query to search per values of keys.

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

@@ -108,15 +108,14 @@ const KeyList = forwardRef((props: Props, ref) => {
   useEffect(() => {
     itemsRef.current = [...keysState.keys]
 
-    if (!isNotRendered.current && !loading) {
+    if (!isNotRendered.current && !loading && keysState.lastRefreshTime) {
       setFirstDataLoaded(true)
     }
 
     isNotRendered.current = false
     dispatch(setBrowserIsNotRendered(isNotRendered.current))
     if (itemsRef.current.length === 0) {
       cancelAllMetadataRequests()
-      setFirstDataLoaded(true)
       rerender({})
       return
     }
@@ -135,6 +134,7 @@ const KeyList = forwardRef((props: Props, ref) => {
 
   const NoItemsMessage = () => (
     <NoKeysMessage
+      isLoading={loading || !firstDataLoaded}
       total={keysState.total}
       scanned={keysState.scanned}
       onAddKeyPanel={onAddKeyPanel}
@@ -146,10 +146,6 @@ const KeyList = forwardRef((props: Props, ref) => {
       return ''
     }
 
-    if (!keysState.lastRefreshTime || itemsRef.current.length < keysState.keys.length) {
-      return 'loading...'
-    }
-
     return <NoItemsMessage />
   }
 

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

@@ -105,9 +105,12 @@ const KeyTree = forwardRef((props: Props, ref) => {
   }, [keysState.keys])
 
   useEffect(() => {
-    setFirstDataLoaded(true)
+    if (keysState.lastRefreshTime) {
+      setFirstDataLoaded(true)
+    }
+
     setItems(parseKeyNames(keysState.keys))
-  }, [sorting, delimiter, keysState.lastRefreshTime])
+  }, [keysState.lastRefreshTime])
 
   useEffect(() => {
     openSelectedKey(selectedKeyName)
@@ -160,20 +163,15 @@ const KeyTree = forwardRef((props: Props, ref) => {
     })
   }
 
-  if (keysState.lastRefreshTime && keysState.keys.length === 0) {
-    const NoItemsMessage = () => {
-      if (loading || !firstDataLoaded || !keysState.lastRefreshTime) {
-        return <span>loading...</span>
-      }
-
-      return (
-        <NoKeysMessage
-          total={keysState.total}
-          scanned={keysState.scanned}
-          onAddKeyPanel={onAddKeyPanel}
-        />
-      )
-    }
+  if (keysState.keys.length === 0) {
+    const NoItemsMessage = () => (
+      <NoKeysMessage
+        isLoading={loading || !firstDataLoaded}
+        total={keysState.total}
+        scanned={keysState.scanned}
+        onAddKeyPanel={onAddKeyPanel}
+      />
+    )
 
     return (
       <div className={cx(styles.content)}>
@@ -195,7 +193,7 @@ const KeyTree = forwardRef((props: Props, ref) => {
           deleting={deleting}
           statusSelected={selectedKeyName}
           statusOpen={statusOpen}
-          loading={loading || constructingTree || !keysState.lastRefreshTime}
+          loading={loading || constructingTree}
           commonFilterType={commonFilterType}
           setConstructingTree={setConstructingTree}
           webworkerFn={constructKeysToTree}

redisinsight/ui/src/pages/browser/components/no-keys-message/NoKeysMessage.tsx

@@ -5,6 +5,7 @@ import { SearchMode } from 'uiSrc/slices/interfaces/keys'
 
 import {
   FullScanNoResultsFoundText,
+  LoadingText,
   NoResultsFoundText,
   NoSelectedIndexText,
   ScanNoResultsFoundText,
@@ -15,6 +16,7 @@ import { redisearchSelector } from 'uiSrc/slices/browser/redisearch'
 import NoKeysFound from '../no-keys-found'
 
 export interface Props {
+  isLoading: boolean
   total: number
   scanned: number
   onAddKeyPanel: (value: boolean) => void
@@ -25,6 +27,7 @@ const NoKeysMessage = (props: Props) => {
     total,
     scanned,
     onAddKeyPanel,
+    isLoading,
   } = props
 
   const { selectedIndex, isSearched: redisearchIsSearched } = useSelector(redisearchSelector)
@@ -35,6 +38,10 @@ const NoKeysMessage = (props: Props) => {
       return NoSelectedIndexText
     }
 
+    if (isLoading) {
+      return LoadingText
+    }
+
     if (total === 0) {
       return NoResultsFoundText
     }
@@ -44,6 +51,10 @@ const NoKeysMessage = (props: Props) => {
     }
   }
 
+  if (isLoading) {
+    return LoadingText
+  }
+
   if (total === 0) {
     return (<NoKeysFound onAddKeyPanel={onAddKeyPanel} />)
   }