Merge pull request #3366 from tylershuster/sigil-speedup

interface: Sigil speedup

pkg/interface/src/logic/lib/sigil.js

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React, { memo } from 'react';
 import { sigil, reactRenderer } from 'urbit-sigil-js';
 
-export class Sigil extends Component {
-  static foregroundFromBackground(background) {
+export const foregroundFromBackground = (background) => {
   const rgb = {
     r: parseInt(background.slice(1, 3), 16),
     g: parseInt(background.slice(3, 5), 16),
@@ -14,35 +13,27 @@ export class Sigil extends Component {
   return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
 }
 
-  render() {
-    const { props } = this;
-
-    const classes = props.classes || '';
-
-    const foreground = Sigil.foregroundFromBackground(props.color);
-
-    if (props.ship.length > 14) {
-      return (
-        <div
+export const Sigil = memo(({ classes = '', color, ship, size, svgClass = '' }) => {
+  return ship.length > 14
+    ? (<div
       className={'bg-black dib ' + classes}
-          style={{ width: props.size, height: props.size }}
-        ></div>
-      );
-    } else {
-      return (
-        <div
+      style={{ width: size, height: size }}>
+    </div>)
+    : (<div
       className={'dib ' + classes}
-          style={{ flexBasis: props.size, backgroundColor: props.color }}
+      style={{ flexBasis: size, backgroundColor: color }}
     >
       {sigil({
-            patp: props.ship,
+        patp: ship,
         renderer: reactRenderer,
-            size: props.size,
-            colors: [props.color, foreground],
-            class: props.svgClass
+        size: size,
+        colors: [
+          color,
+          foregroundFromBackground(color)
+        ],
+        class: svgClass
       })}
-        </div>
-      );
-    }
-  }
-}
+    </div>)
+})
+
+export default Sigil;

pkg/interface/src/views/App.js

@@ -22,7 +22,7 @@ import GlobalStore from '~/logic/store/store';
 import GlobalSubscription from '~/logic/subscription/global';
 import GlobalApi from '~/logic/api/global';
 import { uxToHex } from '~/logic/lib/util';
-import { Sigil } from '~/logic/lib/sigil';
+import { foregroundFromBackground } from '~/logic/lib/sigil';
 
 const Root = styled.div`
   font-family: ${p => p.theme.fonts.sans};
@@ -85,7 +85,7 @@ class App extends React.Component {
       if (this.state.contacts.hasOwnProperty('/~/default')) {
         background = `#${uxToHex(this.state.contacts['/~/default'][window.ship].color)}`;
       }
-      const foreground = Sigil.foregroundFromBackground(background);
+      const foreground = foregroundFromBackground(background);
       const svg = sigiljs({
         patp: window.ship,
         renderer: stringRenderer,