Merge pull request #1282 from RedisInsight/fe/bugfix/RI-3595_Speed_up_initial_load

#RI-3672, #RI-3671

Author: egor-zalenski

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

@@ -136,15 +136,21 @@ describe('KeyList', () => {
     />)
 
     await waitFor(async () => {
-      expect(apiServiceMock).toBeCalledTimes(2)
+      expect(apiServiceMock).toBeCalledTimes(3)
 
       expect(apiServiceMock.mock.calls[0]).toEqual([
         '/instance//keys/get-metadata',
-        { keys: ['key1'] },
+        { keys: ['key1', 'key2', 'key3'] },
         params,
       ])
 
       expect(apiServiceMock.mock.calls[1]).toEqual([
+        '/instance//keys/get-metadata',
+        { keys: ['key1'] },
+        params,
+      ])
+
+      expect(apiServiceMock.mock.calls[2]).toEqual([
         '/instance//keys/get-metadata',
         { keys: ['key1', 'key2', 'key3'] },
         params,

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

@@ -99,6 +99,7 @@ const KeyList = forwardRef((props: Props, ref) => {
   useEffect(() => {
     itemsRef.current = [...keysState.keys]
     if (itemsRef.current.length === 0) {
+      rerender({})
       return
     }
 
@@ -168,6 +169,7 @@ const KeyList = forwardRef((props: Props, ref) => {
     const newItems = bufferFormatRows(startIndex, lastIndex)
 
     getMetadata(startIndex, lastIndex, newItems)
+    rerender({})
   }, 100)
 
   const bufferFormatRows = (startIndex: number, lastIndex: number): GetKeyInfoResponse[] => {
@@ -199,7 +201,8 @@ const KeyList = forwardRef((props: Props, ref) => {
           lastIndex,
           loadedItems,
           isFirstEmpty: !isSomeNotUndefined(itemsInit[0]),
-        })
+        }),
+      () => { rerender({}) }
     ))
   }
 

redisinsight/ui/src/utils/formatters/utils.ts

@@ -4,7 +4,7 @@ export const bufferFormatRangeItems = (
   const newItems = []
   if (lastIndex >= startIndex) {
     for (let index = startIndex; index <= lastIndex; index++) {
-      if (!items[index]) return [startIndex, newItems]
+      if (!items[index]) return newItems
       newItems.push(formatItem(items[index]))
     }
   }