feat(FinancialReports): add loading progress bar.

fix(preformance): Optimize preformance of virtualized list.
fix(preformance): Optimize financial reports preformance.

client/src/components/Datatable/TableCell.js

@@ -62,7 +62,7 @@ export default function TableCell({
           'cell-inner',
         )}
         style={{
-          'padding-left':
+          paddingLeft:
             isExpandColumn && expandable
               ? `${depth * expandColumnSpace}rem`
               : '',

client/src/components/Datatable/TableHeader.js

@@ -66,7 +66,7 @@ function TableHeaderGroup({ headerGroup }) {
   return (
     <div {...headerGroup.getHeaderGroupProps()} className="tr">
       {headerGroup.headers.map((column, index) => (
-        <TableHeaderCell column={column} index={index} />
+        <TableHeaderCell key={index} column={column} index={index} />
       ))}
     </div>
   );
@@ -87,8 +87,8 @@ export default function TableHeader() {
   return (
     <ScrollSyncPane>
       <div className="thead">
-        {headerGroups.map((headerGroup) => (
-          <TableHeaderGroup headerGroup={headerGroup} />
+        {headerGroups.map((headerGroup, index) => (
+          <TableHeaderGroup key={index} headerGroup={headerGroup} />
         ))}
         <If condition={progressBarLoading}>
           <MaterialProgressBar />

client/src/components/Datatable/TableRow.js

@@ -1,23 +1,18 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
+import { ContextMenu } from 'components';
 import classNames from 'classnames';
 import useContextMenu from 'react-use-context-menu';
 
 import TableContext from './TableContext';
-import { saveInvoke } from 'utils';
-import { ContextMenu } from 'components';
-
+import { saveInvoke, ConditionalWrapper } from 'utils';
 
 /**
- * Table row.
+ * Table row context wrapper.
  */
-export default function TableRow({ row, className, style }) {
+function TableRowContextMenu({ children, row }) {
+  // Table context.
   const {
-    props: {
-      TableCellRenderer,
-      rowContextMenu,
-      rowClassNames,
-      ContextMenu: ContextMenuContent,
-    },
+    props: { ContextMenu: ContextMenuContent },
     table,
   } = useContext(TableContext);
 
@@ -32,33 +27,64 @@ export default function TableRow({ row, className, style }) {
     collect: () => 'Title',
   });
 
+  const handleClose = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
   return (
-    <div
-      {...row.getRowProps({
-        className: classNames(
-          'tr',
-          {
-            'is-expanded': row.isExpanded && row.canExpand,
-          },
-          saveInvoke(rowClassNames, row),
-          className,
-        ),
-        style,
-      })}
-      {...bindTrigger}
-    >
-      {row.cells.map((cell, index) => (
-        <TableCellRenderer cell={cell} row={row} index={index + 1} />
-      ))}
+    <div class="tr-context" {...bindTrigger}>
+      {children}
 
       <ContextMenu
         bindMenu={bindMenu}
         isOpen={isVisible}
         coords={coords}
-        onClosed={() => setVisible(false)}
+        onClosed={handleClose}
       >
         <ContextMenuContent {...table} row={row} />
       </ContextMenu>
     </div>
   );
 }
+
+/**
+ * Table row.
+ */
+export default function TableRow({ row, className, style }) {
+  const {
+    props: {
+      TableCellRenderer,
+      rowClassNames,
+      ContextMenu: ContextMenuContent,
+    },
+  } = useContext(TableContext);
+
+  return (
+    <div
+      {...row.getRowProps({
+        className: classNames(
+          'tr',
+          { 'is-expanded': row.isExpanded && row.canExpand },
+          saveInvoke(rowClassNames, row),
+          className,
+        ),
+        style,
+      })}
+    >
+      <ConditionalWrapper
+        condition={ContextMenuContent}
+        wrapper={TableRowContextMenu}
+        row={row}
+      >
+        {row.cells.map((cell, index) => (
+          <TableCellRenderer
+            key={index}
+            cell={cell}
+            row={row}
+            index={index + 1}
+          />
+        ))}
+      </ConditionalWrapper>
+    </div>
+  );
+}

client/src/components/Datatable/TableRows.js

@@ -10,8 +10,8 @@ export default function TableRows() {
     props: { TableRowRenderer, TableCellRenderer },
   } = useContext(TableContext);
 
-  return page.map((row) => {
+  return page.map((row, index) => {
     prepareRow(row);
-    return <TableRowRenderer row={row} TableCellRenderer={TableCellRenderer} />;
+    return <TableRowRenderer key={index} row={row} TableCellRenderer={TableCellRenderer} />;
   });
 }

client/src/components/Datatable/TableVirtualizedRows.js

@@ -3,11 +3,13 @@ import { WindowScroller, AutoSizer, List } from 'react-virtualized';
 import { CLASSES } from 'common/classes';
 import TableContext from './TableContext';
 
+/**
+ * Table virtualized list row.
+ */
 function TableVirtualizedListRow({
   index,
   isScrolling,
   isVisible,
-  key,
   style,
 }) {
   const {
@@ -18,7 +20,7 @@ function TableVirtualizedListRow({
   const row = page[index];
   prepareRow(row);
 
-  return <TableRowRenderer row={row} style={style} />;
+  return (<TableRowRenderer row={row} style={style} />);
 }
 
 /**
@@ -27,39 +29,38 @@ function TableVirtualizedListRow({
 export default function TableVirtualizedListRows() {
   const {
     table: { page },
-    props: { vListrowHeight, vListOverscanRowCount }
+    props: { vListrowHeight, vListOverscanRowCount },
   } = useContext(TableContext);
 
   // Dashboard content pane.
-  const dashboardContentPane = document.querySelector(
+  const dashboardContentPane = React.useMemo(()=> document.querySelector(
     `.${CLASSES.DASHBOARD_CONTENT_PANE}`,
-  );
+  ), []);
+
+  const rowRenderer = React.useCallback(({ key, ...args }) => (
+    <TableVirtualizedListRow {...args} key={key} />
+  ), []);
+
   return (
     <WindowScroller scrollElement={dashboardContentPane}>
-      {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
-        <div className={'WindowScrollerWrapper'}>
-          <AutoSizer disableHeight>
-            {({ width }) => (
-              <div ref={registerChild}>
-                <List
-                  autoHeight={true}
-                  className={'List'}
-                  height={height}
-                  isScrolling={isScrolling}
-                  onScroll={onChildScroll}
-                  overscanRowCount={vListOverscanRowCount}
-                  rowCount={page.length}
-                  rowHeight={vListrowHeight}
-                  rowRenderer={({ ...args }) => {
-                    return <TableVirtualizedListRow {...args} />;
-                  }}
-                  scrollTop={scrollTop}
-                  width={width}
-                />
-              </div>
-            )}
-          </AutoSizer>
-        </div>
+      {({ height, isScrolling, onChildScroll, scrollTop }) => (
+        <AutoSizer disableHeight>
+          {({ width }) => (
+            <List
+              autoHeight={true}
+              className={'List'}
+              height={height}
+              isScrolling={isScrolling}
+              onScroll={onChildScroll}
+              overscanRowCount={vListOverscanRowCount}
+              rowCount={page.length}
+              rowHeight={vListrowHeight}
+              rowRenderer={rowRenderer}
+              scrollTop={scrollTop}
+              width={width}
+            />
+          )}
+        </AutoSizer>
       )}
     </WindowScroller>
   );