fix rendering performances issue

Author: jpinsonneau

web/src/components/netflow-table/__tests__/netflow-table-row.spec.tsx

@@ -13,7 +13,8 @@ describe('<NetflowTableRow />', () => {
   const mocks = {
     size: 'm' as Size,
     onSelect: jest.fn(),
-    tableWidth: 100
+    tableWidth: 100,
+    showContent: true
   };
   it('should render component', async () => {
     flows = FlowsSample;

web/src/components/netflow-table/netflow-table-row.css

@@ -1,9 +1,9 @@
 /* table stripping from pf-color-black-150 value */
-.light-stripped:nth-child(even) {
+:not(.newflow-appear).light-stripped:nth-child(even) {
   background-color: #f5f5f5;
 }
 
-.dark-stripped:nth-child(even) {
+:not(.newflow-appear).dark-stripped:nth-child(even) {
   background-color: #050505;
 }
 

web/src/components/netflow-table/netflow-table-row.tsx

@@ -16,39 +16,34 @@ const NetflowTableRow: React.FC<{
   onSelect: (record?: Record) => void;
   highlight: boolean;
   height?: number;
+  showContent?: boolean;
   tableWidth: number;
-}> = ({ flow, selectedRecord, columns, size, onSelect, highlight, height, tableWidth }) => {
+}> = ({ flow, selectedRecord, columns, size, onSelect, highlight, height, showContent, tableWidth }) => {
   const onRowClick = () => {
     onSelect(flow);
   };
 
-  const shouldHighlight = React.useRef(highlight);
-
   return (
-    <Tr
-      data-test={`tr-${flow.key}`}
-      isRowSelected={flow.key === selectedRecord?.key}
-      onRowClick={onRowClick}
-      className={`${isDark() ? 'dark' : 'light'}-stripped`}
-    >
-      {columns.map(c => (
-        <CSSTransition
-          key={c.id}
-          in={shouldHighlight.current}
-          appear={shouldHighlight.current}
-          timeout={100}
-          classNames="newflow"
-        >
-          <Td
-            data-test={`td-${flow.key}`}
-            key={c.id}
-            style={{ height, width: `${Math.floor((100 * c.width) / tableWidth)}%` }}
-          >
-            {<RecordField flow={flow} column={c} size={size}></RecordField>}
-          </Td>
-        </CSSTransition>
-      ))}
-    </Tr>
+    <CSSTransition in={highlight} appear={highlight} timeout={100} classNames="newflow">
+      <Tr
+        data-test={`tr-${flow.key}`}
+        isRowSelected={flow.key === selectedRecord?.key}
+        onRowClick={onRowClick}
+        className={`${isDark() ? 'dark' : 'light'}-stripped`}
+        style={{ height }}
+      >
+        {showContent &&
+          columns.map(c => (
+            <Td
+              data-test={`td-${flow.key}`}
+              key={c.id}
+              style={{ height: '100%', width: `${Math.floor((100 * c.width) / tableWidth)}%` }}
+            >
+              {<RecordField flow={flow} column={c} size={size}></RecordField>}
+            </Td>
+          ))}
+      </Tr>
+    </CSSTransition>
   );
 };
 

web/src/components/netflow-table/netflow-table.tsx

@@ -148,29 +148,26 @@ const NetflowTable: React.FC<{
 
   const getBody = React.useCallback(() => {
     const rowHeight = getRowHeight();
-    return getSortedFlows().map((f, i) =>
-      scrollPosition <= i * rowHeight && scrollPosition + containerHeight > i * rowHeight ? (
-        <NetflowTableRow
-          key={f.key}
-          flow={f}
-          columns={columns}
-          size={size}
-          selectedRecord={selectedRecord}
-          onSelect={onSelect}
-          highlight={
-            previousContainerHeight === containerHeight &&
-            previousScrollPosition === scrollPosition &&
-            previousActiveSortDirection === activeSortDirection &&
-            previousActiveSortIndex === activeSortId &&
-            !firstRender.current
-          }
-          height={rowHeight}
-          tableWidth={width}
-        />
-      ) : (
-        <tr className={`empty-row`} style={{ height: rowHeight }} key={f.key} />
-      )
-    );
+    return getSortedFlows().map((f, i) => (
+      <NetflowTableRow
+        key={f.key}
+        flow={f}
+        columns={columns}
+        size={size}
+        selectedRecord={selectedRecord}
+        onSelect={onSelect}
+        highlight={
+          previousContainerHeight === containerHeight &&
+          previousScrollPosition === scrollPosition &&
+          previousActiveSortDirection === activeSortDirection &&
+          previousActiveSortIndex === activeSortId &&
+          !firstRender.current
+        }
+        height={rowHeight}
+        showContent={scrollPosition <= i * rowHeight && scrollPosition + containerHeight > i * rowHeight}
+        tableWidth={width}
+      />
+    ));
   }, [
     activeSortDirection,
     activeSortId,