From a7041c8ef81edf1baa98e167d18b830e570525c1 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Wed, 11 Jul 2018 15:15:28 -0700
Subject: [PATCH] Use opacity for loading

---
 src/App.css |  5 +++++
 src/App.js  | 21 ++++++++++++---------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/App.css b/src/App.css
index 42463681..f3ad7af9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,9 @@
 .screenshot {
   image-rendering: pixelated;
   height: 100%;
+  opacity: 0;
+}
+
+.screenshot.loaded {
+  opacity: 1;
 }
diff --git a/src/App.js b/src/App.js
index fdd2612c..4720100a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -31,14 +31,13 @@ class Skin extends React.Component {
         }}
       >
         <a href={this.props.href} target="_blank">
-          <img
-            src={this.props.src}
-            className={`screenshot`}
-            onLoad={this._handleLoad}
-            style={{
-              visibility: this.state.loaded ? "inherit" : "hidden"
-            }}
-          />
+          {(this.state.loaded || !this.props.isScrolling) && (
+            <img
+              src={this.props.src}
+              className={`screenshot ${this.state.loaded ? "loaded" : ""}`}
+              onLoad={this._handleLoad}
+            />
+          )}
         </a>
       </div>
     );
@@ -59,6 +58,7 @@ class App extends React.Component {
     style,
     columnCount,
     columnWidth,
+    rowHeight,
     isScrolling,
     isVisible
   }) {
@@ -70,6 +70,7 @@ class App extends React.Component {
           key={hash}
           src={`https://s3.amazonaws.com/webamp-uploaded-skins/screenshots/${hash}.png`}
           width={columnWidth}
+          height={rowHeight}
           color={skins[hash].color}
           isScrolling={isScrolling}
           isVisible={isVisible}
@@ -100,6 +101,7 @@ class App extends React.Component {
                 height={height}
                 isScrolling={isScrolling}
                 onScroll={onChildScroll}
+                overscanRowCount={10}
                 rowCount={hashes.length / columnCount}
                 rowHeight={rowHeight}
                 rowRenderer={props =>
@@ -107,7 +109,8 @@ class App extends React.Component {
                     ...props,
                     width,
                     columnCount,
-                    columnWidth
+                    columnWidth,
+                    rowHeight
                   })
                 }
                 scrollTop={scrollTop}