use existing "poor-man's virtualization" for lists

Author: noahm

src/common-components/progressive-render.jsx

@@ -0,0 +1,45 @@
+// @ts-check
+import { useState, cloneElement } from 'react';
+import { Visible } from './visible';
+
+const INITIAL_SIZE = 20;
+const GROW_BLOCK_SIZE = 29;
+
+/**
+ * @template ItemType
+ * @param {{ items: Array<ItemType>, renderItem(item: ItemType): import('react').ReactElement }} props
+ * Given a list of items, only renders the first 20 by default,
+ * and then more whenever the last item is close to being on screen
+ */
+export function ProgressiveRender(props) {
+  const [listSize, setListSize] = useState(INITIAL_SIZE);
+  const showSize = Math.min(props.items.length, listSize);
+
+  return (
+    <>
+      {props.items.slice(0, showSize).map((item, index) => {
+        const entry = cloneElement(props.renderItem(item), { key: index });
+
+        return index < showSize - 1 ? (
+          entry
+        ) : (
+          <Visible
+            key={index}
+            rootMargin="0px 0px 300px 0px"
+            onVisible={handleBottomVisible}
+          >
+            {entry}
+          </Visible>
+        );
+      })}
+    </>
+  );
+
+  function handleBottomVisible() {
+    const incrementListSize = listSize + GROW_BLOCK_SIZE;
+    setListSize(incrementListSize);
+    if (incrementListSize > props.items.length) {
+      // TODO: control fetch more from here?
+    }
+  }
+}

src/detail-panels/block-panel-generic/list-view.jsx

@@ -1,50 +1,24 @@
 // @ts-check
 /// <reference path="../../types.d.ts" />
 import { FormatTimestamp } from '../../common-components/format-timestamp';
-import { Visible } from '../../common-components/visible';
-import { useState } from 'react';
+import { ProgressiveRender } from '../../common-components/progressive-render';
 import { AccountShortEntry } from '../../common-components/account-short-entry';
 import { localise } from '../../localisation';
 
-const INITIAL_SIZE = 20;
-const GROW_BLOCK_SIZE = 29;
-
 /**
  * @param {{
  *  blocklist: (BlockedByRecord | { did: string; blocked_date: string })[];
  * }} _
  */
 export function ListView({ blocklist }) {
-  const [listSize, setListSize] = useState(INITIAL_SIZE);
-  const showSize = Math.min(blocklist.length, listSize);
-
   return (
     <ul className="block-list">
-      {blocklist.slice(0, showSize).map((block, index) => {
-        const entry = <ListViewEntry key={index} {...block} />;
-
-        return index < showSize - 1 ? (
-          entry
-        ) : (
-          <Visible
-            key={index}
-            rootMargin="0px 0px 300px 0px"
-            onVisible={handleBottomVisible}
-          >
-            {entry}
-          </Visible>
-        );
-      })}
+      <ProgressiveRender
+        items={blocklist}
+        renderItem={(item) => <ListViewEntry {...item} />}
+      />
     </ul>
   );
-
-  function handleBottomVisible() {
-    const incrementListSize = listSize + GROW_BLOCK_SIZE;
-    setListSize(incrementListSize);
-    if (incrementListSize > blocklist.length) {
-      // TODO: fetch more
-    }
-  }
 }
 
 /**

src/detail-panels/lists/list-view.jsx

@@ -5,6 +5,7 @@ import { AccountShortEntry } from '../../common-components/account-short-entry';
 import { FormatTimestamp } from '../../common-components/format-timestamp';
 import { useListSize } from '../../api/lists';
 import './list-view.css';
+import { ProgressiveRender } from '../../common-components/progressive-render';
 
 /**
  * @param {{
@@ -15,21 +16,21 @@ import './list-view.css';
 export function ListView({ className, list }) {
   return (
     <ul className={'lists-as-list-view ' + (className || '')}>
-      {(list || []).map((entry, i) => (
-        <ListViewEntry key={i} entry={entry} style={{}} />
-      ))}
+      <ProgressiveRender
+        items={list || []}
+        renderItem={(entry) => <ListViewEntry entry={entry} />}
+      />
     </ul>
   );
 }
 
 /**
  * @param {{
  *  className?: string,
- *  entry: AccountListEntry,
- * style:any
+ *  entry: AccountListEntry
  * }} _
  */
-export function ListViewEntry({ className, entry, style }) {
+export function ListViewEntry({ className, entry }) {
   const { data: sizeData, isLoading } = useListSize(entry?.url);
   const count = sizeData?.count?.toLocaleString() || '';