List counts

package.json

@@ -23,12 +23,13 @@
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.20",
     "@mui/styles": "^5.14.20",
-    "@tanstack/react-query": "^5.61.4",
+    "@tanstack/react-query": "^5.64.1",
     "@yornaath/batshit": "^0.10.1",
     "ag-grid-community": "^31.0.2",
     "ag-grid-react": "^31.0.3",
     "fuse.js": "^7.0.0",
     "iso-web": "^1.0.6",
+    "p-queue": "npm:@nmann/p-queue@^8.1.1",
     "punycode2": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/api/lists.js

@@ -1,9 +1,10 @@
 // @ts-check
 
 import { unwrapShortHandle } from '.';
-import { fetchClearskyApi } from './core';
+import { fetchClearskyApi, unwrapClearskyURL } from './core';
 import { useResolveHandleOrDid } from './resolve-handle-or-did';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import PQueue from 'p-queue';
 
 const PAGE_SIZE = 100;
 
@@ -24,16 +25,33 @@ export function useList(handleOrDID) {
 }
 
 /**
+ * Look up the total number of lists to which a given handle/DID belongs
  * @param {string | undefined} handleOrDID
  */
-export function useListTotal(handleOrDID) {
+export function useListCount(handleOrDID) {
   const profileQuery = useResolveHandleOrDid(handleOrDID);
   const shortHandle = profileQuery.data?.shortHandle;
   return useQuery({
     enabled: !!shortHandle,
     queryKey: ['list-total', shortHandle],
     // @ts-expect-error shortHandle won't really be undefined because the query will be disabled
-    queryFn: () => getListTotal(shortHandle),
+    queryFn: () => getListCount(shortHandle),
+  });
+}
+
+const TWELVE_HOURS = 1000 * 60 * 60 * 12;
+
+/**
+ * Gets the size (length) of a given user list
+ * @param {string} listUrl
+ */
+export function useListSize(listUrl) {
+  return useQuery({
+    enabled: !!listUrl,
+    queryKey: ['list-size', listUrl],
+    queryFn: ({ signal }) => getListSize(listUrl, signal),
+    staleTime: TWELVE_HOURS,
+    gcTime: TWELVE_HOURS,
   });
 }
 
@@ -70,12 +88,46 @@ async function getList(shortHandle, currentPage = 1) {
 }
 
 /**
+ * Gets the total number of lists to which a given handle belongs
  * @param {string} shortHandle
  */
-async function getListTotal(shortHandle) {
+async function getListCount(shortHandle) {
   const handleURL = 'get-list/total/' + unwrapShortHandle(shortHandle);
-
   /** @type {{ data: { count: number; pages: number } }} */
   const re = await fetchClearskyApi('v1', handleURL);
   return re.data;
 }
+
+/**
+ * Gets the size (length) of a given user list
+ * @param {string} listUrl
+ * @param {AbortSignal} signal
+ * @returns {Promise<{ count: number } | null>} null if response is a 400/404
+ */
+async function getListSize(listUrl, signal) {
+  const apiUrl = unwrapClearskyURL(
+    `/api/v1/anon/get-list/specific/total/${encodeURIComponent(listUrl)}`
+  );
+  signal.throwIfAborted;
+  const resp = await listSizeQueue.add(() => fetch(apiUrl, { signal }), {
+    signal,
+    throwOnTimeout: true,
+  });
+  if (resp.ok) {
+    /** @type {{ data: { count: number }, list_uri: string }} */
+    const respData = await resp.json();
+    return respData.data;
+  }
+  if (resp.status === 400 || resp.status === 404) {
+    return null;
+  }
+  throw new Error('getListSize error: ' + resp.statusText);
+}
+
+/**
+ * create a queue where at most 1 may be sent in any 250 millisecond interval
+ */
+const listSizeQueue = new PQueue({
+  intervalCap: 1,
+  interval: 200,
+});

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,49 +1,23 @@
 // @ts-check
 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.css

@@ -1,6 +1,6 @@
 .lists-as-list-view {
   margin: 0;
-  padding: 0
+  padding: 0;
 }
 
 .lists-as-list-view .lists-entry {
@@ -40,7 +40,7 @@
 .lists-as-list-view .lists-entry .list-name {
   grid-row: 1/ 2;
   grid-column: 1 / 2;
-  padding-left: 1.7em;
+  padding-left: 0.5em;
   font-weight: bold;
 }
 
@@ -51,4 +51,9 @@
   padding-left: 1.7em;
   white-space: normal;
   word-wrap: break-word;
-}
+}
+
+.lists-as-list-view .lists-entry .list-count {
+  padding-left: 0.3em;
+  color: green;
+}