implement list virtualization

Author: medyo

package.json

@@ -27,6 +27,7 @@
     "react-spinners": "^0.10.4",
     "react-toggle": "^4.1.1",
     "react-tooltip": "^4.2.21",
+    "react-virtuoso": "^2.16.3",
     "styled-components": "2",
     "timeago.js": "^4.0.2",
     "web-vitals": "^0.2.4"

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Hackertab.dev",
   "description": "The Developer’s Homepage",
-  "version": "1.13.0",
+  "version": "2.0.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"

src/App.css

@@ -333,7 +333,7 @@ a {
   visibility: visible;
 }
 
-.blockRow:not(:last-child) {
+.blockContent > div > div > div:not(:last-child), .blockRow:not(:last-child) {
   border-bottom: 1px solid var(--card-content-divider);
 }
 

src/components/CardComponent.js

@@ -22,7 +22,7 @@ function CardComponent({ icon, title, children, fullBlock, link }) {
           </a>
         )}
       </div>
-      <div className="blockContent scrollable">{children}</div>
+      {children}
     </div>
   )
 }

src/components/ListComponent.js

@@ -2,6 +2,14 @@ import React, { useState, useEffect } from 'react'
 import CarbonAd from './CarbonAd'
 import { trackException } from '../utils/Analytics'
 import Placeholder from './Placeholder'
+import { Virtuoso } from 'react-virtuoso'
+
+function ListHeader(withAds) {
+  if (!withAds) {
+    return null
+  }
+  return <CarbonAd key={'carbonAd0'} />
+}
 
 function ListComponent({ fetchData, refresh, renderItem, withAds, placeholder = <Placeholder /> }) {
   const [items, setItems] = useState([])
@@ -34,13 +42,15 @@ function ListComponent({ fetchData, refresh, renderItem, withAds, placeholder =
     if (!items) {
       return
     }
-    return items.map((item, index) => {
-      let content = [renderItem(item, index)]
-      if (withAds && index == 0) {
-        content.unshift(<CarbonAd key={'carbonAd0'} />)
-      }
-      return content
-    })
+
+    return (
+      <Virtuoso
+        className="blockContent scrollable"
+        components={{ Header: () => ListHeader(withAds) }}
+        data={items}
+        itemContent={(index, item) => renderItem(item, index)}
+      />
+    )
   }
 
   function Placeholders() {

yarn.lock

@@ -2168,6 +2168,18 @@
     "@typescript-eslint/types" "4.8.1"
     eslint-visitor-keys "^2.0.0"
 
+"@virtuoso.dev/react-urx@^0.2.12":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz#e2cfc42d259d2a002695e7517d34cb97b64ee9c4"
+  integrity sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==
+  dependencies:
+    "@virtuoso.dev/urx" "^0.2.13"
+
+"@virtuoso.dev/urx@^0.2.12", "@virtuoso.dev/urx@^0.2.13":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/urx/-/urx-0.2.13.tgz#a65e7e8d923cb03397ac876bfdd45c7f71c8edf1"
+  integrity sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -9941,6 +9953,14 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-virtuoso@^2.16.3:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-2.16.3.tgz#d45920d3f21507471636200bed8689b3d84fea64"
+  integrity sha512-FymNswwx9taZGHbnmgIWlvEp42DFHQG++r85JBRS5bKP7jAokSknlYJ6QwTdYcix7ShPsH3fKBlPl23RG/spIQ==
+  dependencies:
+    "@virtuoso.dev/react-urx" "^0.2.12"
+    "@virtuoso.dev/urx" "^0.2.12"
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"