fix: isLoading on the Table component when the variant is listView

src/components/Table/body/loading.js

@@ -1,23 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import LoadingCells from './loadingCells';
+import StyledRow from './styled/row';
 
 export default function Loading({ columns }) {
     const columnsLength = columns.length;
     return (
         <>
-            <tr>
+            <StyledRow>
                 <LoadingCells columns={columns} value={columnsLength} />
-            </tr>
-            <tr>
+            </StyledRow>
+            <StyledRow>
                 <LoadingCells columns={columns} value={columnsLength} />
-            </tr>
-            <tr>
+            </StyledRow>
+            <StyledRow>
                 <LoadingCells columns={columns} value={columnsLength - 1} />
-            </tr>
-            <tr>
+            </StyledRow>
+            <StyledRow>
                 <LoadingCells columns={columns} value={columnsLength - 3} />
-            </tr>
+            </StyledRow>
         </>
     );
 }

src/components/Table/body/loadingCells.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import RenderIf from '../../RenderIf';
 import { SELECTABLE_CHECKBOX } from '../helpers/columns';
 import StyledTdLoadingContainer from './styled/tdLoadingContainer';
 import StyledLoadingCell from './styled/loadingCell';
@@ -13,7 +14,7 @@ function getRandomWidth() {
 
 export default function LoadingCells({ value, columns }) {
     if (value > 0) {
-        return Array(value)
+        return Array(columns.length)
             .fill()
             .map((item, index) => {
                 const key = `loading-cell-${index}`;
@@ -26,7 +27,9 @@ export default function LoadingCells({ value, columns }) {
                 return (
                     <StyledTdLoadingContainer key={key}>
                         <StyledLoadingCell data-id="table_body--loading">
-                            <StyledElementLoading style={styles} />
+                            <RenderIf isTrue={index < value}>
+                                <StyledElementLoading style={styles} />
+                            </RenderIf>
                         </StyledLoadingCell>
                     </StyledTdLoadingContainer>
                 );

src/components/Table/body/row.js

@@ -46,9 +46,9 @@ export default function Row(props) {
 
     if (rowData.type === 'LOADING') {
         return (
-            <tr>
+            <StyledRow>
                 <LoadingCells columns={columns} value={columns.length} />
-            </tr>
+            </StyledRow>
         );
     }
 

src/components/Table/body/styled/elementLoading.js

@@ -7,16 +7,17 @@ const StyledElementLoading = attachThemeAttrs(styled.div)`
     object-fit: contain;
     border-radius: 24px;
     z-index: 1;
-    background: ${props => props.palette.background.secondary}
+    background: ${props => replaceAlpha(props.palette.background.secondary, 0.5)}
         linear-gradient(
             90deg,
             ${props => replaceAlpha(props.palette.background.highlight, 0.01)} 0%,
-            ${props => replaceAlpha(props.palette.background.highlight, 0.65)} 50%,
+            ${props => replaceAlpha(props.palette.background.highlight, 0.7)} 50%,
             ${props => replaceAlpha(props.palette.background.highlight, 0.01)} 100%
         );
     background-size: 400% 400%;
     animation: gradient 2.5s ease-in-out infinite;
-
+    filter: invert(3%); 
+
     @keyframes gradient {
         0% {
             background-position: 14% 0;

src/components/Table/body/styled/loadingCell.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
 
-const StyledLoadingCell = styled.div`
+const StyledLoadingCell = attachThemeAttrs(styled.div)`
     height: 44px;
     width: 100%;
     display: flex;

src/components/Table/body/styled/tdLoadingContainer.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
 
-const StyledTdLoadingContainer = styled.td`
+const StyledTdLoadingContainer = attachThemeAttrs(styled.td)`
     padding: 0;
     text-align: left;
     box-sizing: border-box;
@@ -12,6 +13,42 @@ const StyledTdLoadingContainer = styled.td`
     :last-of-type > div {
         padding: 0 12px;
     }
+
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+        background-color: ${props.palette.background.main};
+        border: none;
+        text-align: center;
+        border-top: 1px solid ${props.palette.border.divider};
+        border-right: 1px solid ${props.palette.border.divider};
+
+        :first-child {
+            border-left: 1px solid ${props.palette.border.divider};
+            border-left-style: solid;
+            border-top-left-radius: 13px; 
+            border-bottom-left-radius: 13px;
+        }
+
+        :last-child {
+            border-right-style: solid;
+            border-bottom-right-radius: 13px; 
+            border-top-right-radius: 13px; 
+        }
+
+        :last-child > div {
+            border-bottom-right-radius: 12px; 
+            border-top-right-radius: 12px;
+            overflow: hidden;
+        }
+
+        :first-child > div {
+            border-top-left-radius: 12px; 
+            border-bottom-left-radius: 12px;
+            overflow: hidden;
+            padding-left: 0.75rem;
+        }
+    `}
 `;
 
 export default StyledTdLoadingContainer;