RI-7637 Loading indicator for tables in Browser keys details (#5104)

* fix(ui): bring back loading indicator for tables in browsers keys details

Author: valkirilov

redisinsight/ui/src/components/base/display/progress-bar/progress-bar-loader.styles.ts

@@ -66,10 +66,12 @@ interface LoaderContainerProps {
   children?: ReactNode
   style?: React.CSSProperties
   className?: string
+  absolute?: boolean
 }
 
 export const LoaderContainer = styled.div<LoaderContainerProps>`
-  position: relative;
+  position: ${({ absolute }) => (absolute ? 'absolute' : 'relative')};
+  width: 100%;
   height: 3px;
   overflow: hidden;
   border-radius: 2px;

redisinsight/ui/src/components/virtual-table/VirtualTable.tsx

@@ -603,6 +603,7 @@ const VirtualTable = (props: IProps) => {
         >
           {loading && !hideProgress && (
             <ProgressBarLoader
+              absolute
               color="primary"
               data-testid="progress-key-table"
             />

redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/hash-details-table/HashDetailsTable.tsx

@@ -382,7 +382,8 @@ const HashDetailsTable = (props: Props) => {
         )
 
         return (
-          <Text color="secondary"
+          <Text
+            color="secondary"
             style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}
             component="div"
           >
@@ -528,9 +529,7 @@ const HashDetailsTable = (props: Props) => {
               testid={`remove-hash-button-${field}`}
               handleDeleteItem={handleDeleteField}
               handleButtonClick={handleRemoveIconClick}
-              appendInfo={
-                length === 1 ? HelpTexts.REMOVE_LAST_ELEMENT() : null
-              }
+              appendInfo={length === 1 ? HelpTexts.REMOVE_LAST_ELEMENT() : null}
             />
           </StopPropagation>
         )
@@ -607,7 +606,6 @@ const HashDetailsTable = (props: Props) => {
         )}
       >
         <VirtualTable
-          hideProgress
           expandable
           autoHeight
           tableRef={tableRef}

redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/list-details-table/ListDetailsTable.tsx

@@ -385,7 +385,6 @@ const ListDetailsTable = () => {
     >
       <VirtualTable
         autoHeight
-        hideProgress
         expandable
         tableRef={tableRef}
         selectable={false}

redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/set-details-table/SetDetailsTable.tsx

@@ -290,9 +290,7 @@ const SetDetailsTable = (props: Props) => {
               handleDeleteItem={handleDeleteMember}
               handleButtonClick={handleRemoveIconClick}
               testid={`set-remove-btn-${member}`}
-              appendInfo={
-                length === 1 ? HelpTexts.REMOVE_LAST_ELEMENT() : null
-              }
+              appendInfo={length === 1 ? HelpTexts.REMOVE_LAST_ELEMENT() : null}
             />
           </div>
         )
@@ -324,7 +322,6 @@ const SetDetailsTable = (props: Props) => {
     >
       <VirtualTable
         autoHeight
-        hideProgress
         expandable
         selectable={false}
         keyName={key}

redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/zset-details-table/ZSetDetailsTable.tsx

@@ -496,7 +496,6 @@ const ZSetDetailsTable = (props: Props) => {
         <VirtualTable
           autoHeight
           tableRef={tableRef}
-          hideProgress
           expandable
           keyName={key}
           headerHeight={headerHeight}