Turbo Render (#298)

* More responsive React updates on scroll

* `Icon`s now use shadow dom

* Faster Sparkline

* Recycle table rows

* Separate Header from Chain to avoid vdom diffing

* Separate THead from Row.HEADER to avoid vdom diffing

* Throttle rendering updates on chain tabs, also styles

* Minor tweaks and fixes

* Created components for all columns

* Wrapping up Column refactor

* Rename Row--td to Column

* Lazy `Ago`

* Update styles for faster layouting

* Minor cleanup

* Fix Connection

* Use shadow DOM in `PolkadotIcon`

* Comments and tweaks for the List component

* Faster Tooltip and Truncate

* Minor tweaks

* Tooltiped columns can now be copied

* Future-proof Connection

* Remove the <div> wrapper from Icon

* Fix dash on missing graph data

* Clean up some SVGs

* Cleanup and comments

* Localize the use of `previousKeys` to `recalculateKeys`

* Custom appState disjoint from React component state

* Make appState and appUpdate refs readonly

* Cleanup

frontend/src/components/List/Column/DownloadColumn.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Types, Maybe, timestamp } from '../../../common';
+import { Column, BANDWIDTH_SCALE } from './';
+import { Node } from '../../../state';
+import { Sparkline } from '../../';
+import icon from '../../../icons/cloud-download.svg';
+
+export class DownloadColumn extends React.Component<Column.Props, {}> {
+  public static readonly label = 'Download Bandwidth';
+  public static readonly icon = icon;
+  public static readonly width = 40;
+  public static readonly setting = 'download';
+  public static readonly sortBy = ({ download }: Node) =>
+    download.length < 3 ? 0 : download[download.length - 1];
+
+  private data: Array<number> = [];
+
+  public shouldComponentUpdate(nextProps: Column.Props) {
+    // Diffing by ref, as data is an immutable array
+    return this.data !== nextProps.node.download;
+  }
+
+  render() {
+    const { download, chartstamps } = this.props.node;
+
+    this.data = download;
+
+    if (download.length < 3) {
+      return <td className="Column">-</td>;
+    }
+
+    return (
+      <td className="Column">
+        <Sparkline
+          width={44}
+          height={16}
+          stroke={1}
+          format={Column.formatBandwidth}
+          values={download}
+          stamps={chartstamps}
+          minScale={BANDWIDTH_SCALE}
+        />
+      </td>
+    );
+  }
+}