perf: WIP on implementing react-virtualized

veksen · veksen · commit d325285e7c60 · 2019-07-02T12:33:01.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,12 +50,14 @@
     "react-highlight": "^0.12.0",
     "react-markdown": "^4.1.0",
     "react-perfect-scrollbar": "^1.5.3",
+    "react-virtualized": "^9.21.1",
     "sharp": "^0.22.1",
     "styled-components": "^4.3.2"
   },
   "devDependencies": {
     "@types/react-helmet": "^5.0.8",
     "@types/react-highlight": "^0.12.1",
+    "@types/react-virtualized": "^9.21.2",
     "@types/styled-components": "^4.1.16",
     "prettier": "^1.18.2",
     "tslint": "^5.18.0",
diff --git a/src/components/DocsContent/index.tsx b/src/components/DocsContent/index.tsx
@@ -1,5 +1,12 @@
 import { navigate } from "gatsby"
 import React, { memo } from "react"
+import {
+  AutoSizer,
+  CellMeasurer,
+  CellMeasurerCache,
+  List,
+  ListRowProps,
+} from "react-virtualized"
 import { Method as MethodInterface } from "../../types"
 import Header from "../Header"
 import Method from "../Method"
@@ -18,12 +25,57 @@ const methodFromPath = (props: any) => {
 const DocsContent = (props: DocsContentProps): JSX.Element => {
   const currentMethod = methodFromPath(props)
   const { methods } = props
+  const cache = new CellMeasurerCache({ defaultHeight: 700, fixedWidth: true })
 
   const SingleMethod = ({ name }) => {
-    const method = methods.find(({ node: method }) => method.name === name)
+    const method = methods.find(
+      ({ node: method }) => method.name === name
+    ) as MethodInterface
     return <Method method={method.node} />
   }
 
+  function rowRenderer({
+    index, // Index of row
+    // isScrolling, // The List is currently being scrolled
+    // isVisible, // This row is visible within the List (eg it is not an overscanned row)
+    key, // Unique key within array of rendered rows
+    parent, // Reference to the parent List (instance)
+    style, // Style object to be applied to row (to position it);
+  }: ListRowProps): JSX.Element {
+    const { node: method } = methods[index]
+
+    // If row content is complex, consider rendering a light-weight placeholder while scrolling.
+    const content = (
+      <Method
+        key={`${method.category}-${method.name}-${index}`}
+        method={method}
+      />
+    )
+
+    // Style is required since it specifies how the row is to be sized and positioned.
+    // React Virtualized depends on this sizing/positioning for proper scrolling behavior.
+    // By default, the List component provides following style properties:
+    //    position
+    //    left
+    //    top
+    //    height
+    //    width
+    // You can add additional class names or style properties as you would like.
+    // Key is also required by React to more efficiently manage the array of rows.
+    return (
+      <CellMeasurer
+        cache={cache}
+        columnIndex={0}
+        key={key}
+        parent={parent}
+        rowIndex={index}
+        // width={this._mostRecentWidth}
+      >
+        <div style={style}>{content}</div>
+      </CellMeasurer>
+    )
+  }
+
   return (
     <SC.DocsContentWrapper>
       <Header />
@@ -34,20 +86,20 @@ const DocsContent = (props: DocsContentProps): JSX.Element => {
           </SC.SeeAll>
         )}
 
-        {/* TODO: optimize performance */}
         {currentMethod ? (
           <SingleMethod name={currentMethod} />
         ) : (
-          /* TODO: get rid of i, currently a dirty fix because Seq-chain is not unique */
-          methods.map((methodNode, i) => {
-            const { node: method } = methodNode
-            return (
-              <Method
-                key={`${method.category}-${method.name}-${i}`}
-                method={method}
+          <AutoSizer>
+            {({ width, height }) => (
+              <List
+                rowRenderer={rowRenderer}
+                width={width}
+                height={height}
+                rowHeight={cache.rowHeight}
+                rowCount={methods.length}
               />
-            )
-          })
+            )}
+          </AutoSizer>
         )}
       </SC.Content>
     </SC.DocsContentWrapper>
diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx
@@ -11,6 +11,7 @@ export const HeaderWrapper = styled.header<{ scrolled: boolean }>`
   top: 0;
   left: 320px;
   right: 0;
+  z-index: 10;
 
   &:after {
     content: "";
diff --git a/src/components/Method/styles.tsx b/src/components/Method/styles.tsx
@@ -9,10 +9,7 @@ export const MethodWrapper = styled.div`
   flex-direction: column;
   background: #293845;
   padding: 11px 11px 24px;
-
-  & + & {
-    margin-top: 75px;
-  }
+  margin-bottom: 75px;
 `
 
 export const Name = styled.h2`
diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx
@@ -1,5 +1,6 @@
 import { graphql, useStaticQuery } from "gatsby"
 import React from "react"
+import "react-virtualized/styles.css"
 import styled from "styled-components"
 
 import DocsContent from "../components/DocsContent"
