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
This commit is contained in:
Maciej Hirsz
2020-11-11 13:41:01 +01:00
committed by GitHub
parent 675776c3e1
commit ebb01c1a7d
72 changed files with 1863 additions and 1118 deletions
@@ -195,9 +195,9 @@ export class ConsensusBlock extends React.Component<ConsensusBlock.Props, {}> {
];
finalizedInfo = matrice.ImplicitFinalized ? (
<Icon className="implicit" src={finalizedIcon} alt="" />
<Icon className="implicit" src={finalizedIcon} />
) : (
<Icon className="explicit" src={finalizedIcon} alt="" />
<Icon className="explicit" src={finalizedIcon} />
);
finalizedHash = matrice.FinalizedHash ? (
@@ -301,25 +301,17 @@ export class ConsensusBlock extends React.Component<ConsensusBlock.Props, {}> {
let statPrecommit;
if (implicitPrevote) {
statPrevote = (
<Icon src={checkIcon} className="implicit" alt="Implicit Prevote" />
);
statPrevote = <Icon src={checkIcon} className="implicit" />;
}
if (implicitPrecommit) {
statPrecommit = (
<Icon src={checkIcon} className="implicit" alt="Implicit Precommit" />
);
statPrecommit = <Icon src={checkIcon} className="implicit" />;
}
if (prevote) {
statPrevote = (
<Icon src={checkIcon} className="explicit" alt="Prevote" />
);
statPrevote = <Icon src={checkIcon} className="explicit" />;
}
if (precommit) {
statPrecommit = (
<Icon src={checkIcon} className="explicit" alt="Precommit" />
);
statPrecommit = <Icon src={checkIcon} className="explicit" />;
}
return (
@@ -329,7 +321,7 @@ export class ConsensusBlock extends React.Component<ConsensusBlock.Props, {}> {
</span>
);
} else {
return <Icon src={hatchingIcon} className="hatching" alt="" />;
return <Icon src={hatchingIcon} className="hatching" />;
}
}
}