#RIVS-304 - Auto refresh

Author: egor-zalenski

src/webviews/src/modules/key-details/components/list-details/ListDetails.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useState } from 'react'
+import React, { PropsWithChildren, useCallback, useState } from 'react'
 import cx from 'classnames'
 import * as l10n from '@vscode/l10n'
 
@@ -44,11 +44,11 @@ const ListDetails = (props: Props) => {
     setIsRemoveItemPanelOpen(true)
   }
 
-  const Actions = ({ children }: PropsWithChildren) => ([
+  const Actions = useCallback(({ children }: PropsWithChildren) => ([
     children,
     <AddItemsAction key={1} title={l10n.t('Add Elements')} openAddItemPanel={openAddItemPanel} />,
     <RemoveItemsAction key={2} title={l10n.t('Remove Elements')} openRemoveItemPanel={openRemoveItemPanel} />,
-  ])
+  ]), [])
 
   return (
     <div className="fluid flex-column relative">

src/webviews/src/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx

@@ -6,7 +6,6 @@ import { sendEventTelemetry, TelemetryEvent, stringToBuffer } from 'uiSrc/utils'
 import { KeyDetailsHeader, KeyDetailsHeaderProps } from 'uiSrc/modules'
 import { KeyTypes } from 'uiSrc/constants'
 import { useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
-import { Spinner } from 'uiSrc/ui'
 
 import { IJSONData } from './interfaces'
 import { RejsonDetails } from './rejson-details'
@@ -91,8 +90,6 @@ const RejsonDetailsWrapper = (props: Props) => {
             data-testid="json-details"
             className={styles.container}
           >
-            {loading && <div className={styles.keySpinner}><Spinner /></div>}
-
             {!isUndefined(data) && (
               <RejsonDetails
                 selectedKey={selectedKey || stringToBuffer('')}

src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss

@@ -149,14 +149,6 @@
   }
 }
 
-.keySpinner {
-  @apply absolute w-full;
-
-  span {
-    @apply w-full #{!important};
-  }
-}
-
 .fullWidthTextArea {
   @apply h-[150px] w-full pb-[30px] max-w-none scroll-pb-5;
 }

src/webviews/src/modules/key-details/components/set-details/SetDetails.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useState } from 'react'
+import React, { PropsWithChildren, useCallback, useState } from 'react'
 import cx from 'classnames'
 import * as l10n from '@vscode/l10n'
 
@@ -54,10 +54,10 @@ export const SetDetails = (props: Props) => {
     addSetMembersAction(data, () => onSuccessAdded(data.members))
   }
 
-  const Actions = ({ children }: PropsWithChildren) => ([
+  const Actions = useCallback(({ children }: PropsWithChildren) => ([
     children,
     <AddItemsAction key={1} title={l10n.t('Add Members')} openAddItemPanel={openAddItemPanel} />,
-  ])
+  ]), [])
 
   return (
     <div className="fluid flex-column relative">

src/webviews/src/modules/key-details/components/string-details/StringDetails.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react'
+import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import * as l10n from '@vscode/l10n'
 
@@ -92,7 +92,7 @@ const StringDetails = (props: Props) => {
     })
   }
 
-  const Actions = ({ children }: PropsWithChildren) => ([
+  const Actions = useCallback(({ children }: PropsWithChildren) => ([
     children,
     <EditItemAction
       key={1}
@@ -103,7 +103,7 @@ const StringDetails = (props: Props) => {
         setEditItem(!editItem)
       }}
     />,
-  ])
+  ]), [])
 
   return (
     <div className="fluid flex-column relative">

src/webviews/src/modules/key-details/components/zset-details/ZSetDetails.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react'
+import React, { ReactNode, useCallback, useState } from 'react'
 import cx from 'classnames'
 import * as l10n from '@vscode/l10n'
 
@@ -52,10 +52,10 @@ const ZSetDetails = (props: Props) => {
     updateZSetMembersAction(data, true, () => onSuccessAdded(data.members))
   }
 
-  const Actions = ({ children }: { children: ReactNode }) => ([
+  const Actions = useCallback(({ children }: { children: ReactNode }) => ([
     children,
     <AddItemsAction key={1} title={l10n.t('Add Members')} openAddItemPanel={openAddItemPanel} />,
-  ])
+  ]), [])
 
   return (
     <div className="fluid flex-column relative">