Merge pull request #1308 from RedisInsight/bugfix/RI-3631_key_list_loading

#RI-3631-update loading behaviour

Author: AlenaSY

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

@@ -75,8 +75,10 @@ const KeyList = forwardRef((props: Props, ref) => {
   const { keyList: { scrollTopPosition } } = useSelector(appContextBrowser)
 
   const [, rerender] = useState({})
+  const [firstDataLoaded, setFirstDataLoaded] = useState(!!keysState.keys.length)
 
   const itemsRef = useRef(keysState.keys)
+  const isNotRendered = useRef(true)
   const renderedRowsIndexesRef = useRef({ startIndex: 0, lastIndex: 0 })
 
   const dispatch = useDispatch()
@@ -99,6 +101,12 @@ const KeyList = forwardRef((props: Props, ref) => {
 
   useEffect(() => {
     itemsRef.current = [...keysState.keys]
+
+    if (!isNotRendered.current && !loading) {
+      setFirstDataLoaded(true)
+    }
+
+    isNotRendered.current = false
     if (itemsRef.current.length === 0) {
       rerender({})
       return
@@ -135,6 +143,9 @@ const KeyList = forwardRef((props: Props, ref) => {
   }
 
   const getNoItemsMessage = () => {
+    if (isNotRendered.current) {
+      return ''
+    }
     if (total === 0) {
       return NoKeysToDisplayText(Pages.workbench(instanceId), onNoKeysLinkClick)
     }
@@ -371,7 +382,7 @@ const KeyList = forwardRef((props: Props, ref) => {
               columns={columns}
               loadMoreItems={onLoadMoreItems}
               onWheel={onWheelSearched}
-              loading={loading}
+              loading={loading || !firstDataLoaded}
               items={itemsRef.current}
               totalItemsCount={keysState.total ? keysState.total : Infinity}
               scanned={isSearched || isFiltered ? keysState.scanned : 0}