From 8a18d2eb4f0bb48293e979ce12722626db00ae3f Mon Sep 17 00:00:00 2001
From: Ben Gotow <ben@foundry376.com>
Date: Fri, 28 Dec 2018 23:06:22 -0500
Subject: [PATCH] Add background to thread list that makes scrolling on slow
 machines less jarring

---
 app/src/components/list-tabular.jsx     | 6 ++++--
 app/static/components/list-tabular.less | 6 ++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/src/components/list-tabular.jsx b/app/src/components/list-tabular.jsx
index 79c4fb066..308f40115 100644
--- a/app/src/components/list-tabular.jsx
+++ b/app/src/components/list-tabular.jsx
@@ -349,7 +349,6 @@ class ListTabular extends Component {
     } = this.props;
     const { count, loaded, empty } = this.state;
     const rows = this.getRowsToRender();
-    const innerStyles = { height: count * itemHeight };
 
     return (
       <div className={`list-container list-tabular ${className}`}>
@@ -366,7 +365,10 @@ class ListTabular extends Component {
             columns={columns}
             draggable={draggable}
             itemHeight={itemHeight}
-            innerStyles={innerStyles}
+            innerStyles={{
+              height: count * itemHeight,
+              backgroundSize: `100% ${this.props.itemHeight}px`,
+            }}
             onClick={onClick}
             onSelect={onSelect}
             onDragEnd={onDragEnd}
diff --git a/app/static/components/list-tabular.less b/app/static/components/list-tabular.less
index e53df6749..df98e8f3f 100644
--- a/app/static/components/list-tabular.less
+++ b/app/static/components/list-tabular.less
@@ -77,6 +77,12 @@
 }
 
 .list-container {
+  .list-rows {
+    // Note: This fills empty / unrendered space with the dividers.
+    // background-size needs to be provided.
+    background: linear-gradient(to top, @list-border 0px, @list-bg 1px) repeat;
+  }
+
   .list-rows > div {
     // Note: This allows rows to be animated in and out!
     transition: top ease-out 120ms;