fix(whiteboard): optimize rendering performance of rendering long list of search items

tldraw/apps/tldraw-logseq/package.json

@@ -33,6 +33,7 @@
     "postcss": "^8.4.17",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "react-virtuoso": "^3.1.0",
     "rimraf": "3.0.2",
     "shadow-cljs": "^2.19.5",
     "tsup": "^6.2.3",

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -7,6 +7,7 @@ import {
   TLResizeInfo,
   validUUID,
 } from '@tldraw/core'
+import { Virtuoso } from 'react-virtuoso'
 import { HTMLContainer, TLComponentProps, useApp } from '@tldraw/react'
 import { useDebouncedValue } from '@tldraw/react'
 import Vec from '@tldraw/vec'
@@ -71,11 +72,7 @@ const LogseqTypeTag = ({
 
 const LogseqPortalShapeHeader = observer(
   ({ type, children }: { type: 'P' | 'B'; children: React.ReactNode }) => {
-    return (
-      <div className="tl-logseq-portal-header">
-        {children}
-      </div>
-    )
+    return <div className="tl-logseq-portal-header">{children}</div>
   }
 )
 
@@ -628,30 +625,35 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
           />
         </div>
         <div className="tl-quick-search-options" ref={optionsWrapperRef}>
-          {options.map(({ actionIcon, onChosen, element }, index) => {
-            return (
-              <div
-                key={index}
-                data-focused={index === focusedOptionIdx}
-                className="tl-quick-search-option"
-                tabIndex={0}
-                onMouseEnter={() => {
-                  setPrefixIcon(actionIcon)
-                  setFocusedOptionIdx(index)
-                }}
-                // we have to use mousedown && stop propagation EARLY, otherwise some
-                // default behavior of clicking the rendered elements will happen
-                onMouseDownCapture={e => {
-                  if (onChosen()) {
-                    e.stopPropagation()
-                    e.preventDefault()
-                  }
-                }}
-              >
-                {element}
-              </div>
-            )
-          })}
+          <Virtuoso
+            style={{ height: Math.min(Math.max(1, options.length), 12) * 36 }}
+            totalCount={options.length}
+            itemContent={index => {
+              const { actionIcon, onChosen, element } = options[index]
+              return (
+                <div
+                  key={index}
+                  data-focused={index === focusedOptionIdx}
+                  className="tl-quick-search-option"
+                  tabIndex={0}
+                  onMouseEnter={() => {
+                    setPrefixIcon(actionIcon)
+                    setFocusedOptionIdx(index)
+                  }}
+                  // we have to use mousedown && stop propagation EARLY, otherwise some
+                  // default behavior of clicking the rendered elements will happen
+                  onMouseDownCapture={e => {
+                    if (onChosen()) {
+                      e.stopPropagation()
+                      e.preventDefault()
+                    }
+                  }}
+                >
+                  {element}
+                </div>
+              )
+            }}
+          />
         </div>
       </div>
     )

tldraw/packages/react/src/hooks/useDebounced.ts

@@ -3,10 +3,16 @@ import { useState, useEffect } from 'react'
 export function useDebouncedValue<T>(value: T, ms = 0) {
   const [debouncedValue, setDebouncedValue] = useState(value)
   useEffect(() => {
+    let canceled = false
     const handler = setTimeout(() => {
-      setDebouncedValue(value)
+      requestIdleCallback(() => {
+        if (!canceled) {
+          setDebouncedValue(value)
+        }
+      })
     }, ms)
     return () => {
+      canceled = true
       clearTimeout(handler)
     }
   }, [value, ms])

tldraw/yarn.lock

@@ -1077,6 +1077,18 @@
   dependencies:
     "@use-gesture/core" "10.2.20"
 
+"@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==
+
 "@vitejs/plugin-basic-ssl@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-0.1.2.tgz#7177f9adc5384f1377b9b91b17ce7cdb8f422abd"
@@ -3779,6 +3791,14 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-virtuoso@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-3.1.0.tgz#e358a39b9fd99895bcc72671a585091b756a1c92"
+  integrity sha512-Rur0d7xiZthRxy3f7Z217Q+U6k1sTsPZZU/kKT73GPB3ROtJCr4Y0Qehg/WxeKhochQPnSuT8VfcsAasdpX2ig==
+  dependencies:
+    "@virtuoso.dev/react-urx" "^0.2.12"
+    "@virtuoso.dev/urx" "^0.2.12"
+
 react@^17, react@^17.0.0:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"