4 files changed, 55 insertions, 2 deletions
diff --git a/package-lock.json b/package-lock.json
index df69def..d85924a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8709,6 +8709,11 @@
         "p-is-promise": "^2.0.0"
       }
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -11347,6 +11352,15 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-window": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.5.tgz",
+      "integrity": "sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
diff --git a/package.json b/package.json
index de99244..eeba040 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "axios": "^0.19.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0"
+    "react-scripts": "3.3.0",
+    "react-window": "^1.8.5"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js
new file mode 100644
index 0000000..6cd774b
--- /dev/null
+++ b/src/components/SmartList/SmartList.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { FixedSizeList } from "react-window";
+
+import { makeStyles } from "@material-ui/core";
+
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`,
+  }
+}));
+
+
+const SmartList = ({ height, width, cellHeight, itemCount, renderItem }) => {
+  const classes = useStyles();
+
+  if (!height) {
+    const windowHeight = window.innerHeight;
+    const headerHeight = document.getElementsByClassName("MuiAppBar-root")[0].clientHeight;
+    height = windowHeight - headerHeight
+  }
+
+  return (
+    <FixedSizeList
+      height={height}
+      width={width}
+      itemSize={cellHeight}
+      itemCount={itemCount}
+      className={classes.root}
+    >
+      {renderItem}
+    </FixedSizeList>
+  );
+};
+
+
+export default SmartList;
diff --git a/src/index.js b/src/index.js
index 07c50bc..431e139 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,6 @@ import Scoreboard from "./components/Scoreboard/Scoreboard";
 
 const useStyles = makeStyles(theme => ({
   root: {
-    padding: theme.spacing(2),
   },
 }));
 
@@ -57,4 +56,5 @@ const App = () => {
   );
 };
 
+document.body.style.overflow = "hidden";
 ReactDOM.render(<App />, document.getElementById('root'));