add bench

Author: stipsan

demo/demo.tsx

@@ -1,7 +1,8 @@
-import {type PortableTextComponents, PortableText} from '@portabletext/react'
+import {type PortableTextBlock, type PortableTextComponents, PortableText} from '@portabletext/react-latest'
 import {studioTheme, ThemeProvider} from '@sanity/ui'
-import {StrictMode, useEffect, useState} from 'react'
+import {StrictMode, Suspense, use, useEffect, useState} from 'react'
 import {createRoot} from 'react-dom/client'
+import {createClient} from '@sanity/client'
 
 import {AnnotatedMap} from './components/AnnotatedMap'
 import {CharacterReference} from './components/CharacterReference'
@@ -12,7 +13,7 @@ import {LinkableHeader} from './components/LinkableHeader'
 import {SchnauzerList} from './components/SchnauzerList'
 import {hasSpeechApi, SpeechSynthesis} from './components/SpeechSynthesis'
 import {TermDefinition} from './components/TermDefinition'
-import {blocks} from './fixture'
+// import {blocks} from './fixture'
 
 /**
  * Note that these are statically defined (outside the scope of a function),
@@ -48,14 +49,21 @@ const ptComponents: PortableTextComponents = {
   },
 }
 
+const client = createClient({projectId: 'ppsg7ml5', dataset: 'test', apiVersion: '2025-12-09', useCdn: true, perspective: 'published'})
+const promise = client.fetch<PortableTextBlock[]>(`*[_type == "simpleBlock" && _id == $id][0].body`, {id: '6468a09e-ce29-48d3-8b36-4b058366e6b5'})
+
 function Demo() {
+  const blocks = use(promise)
   const [count, setCount] = useState(0)
   const showingEverything = count >= blocks.length
   const blocksToShow = showingEverything ? blocks : blocks.slice(0, count)
   useEffect(() => {
-    if (!showingEverything) {
-      setCount(count + 1)
+    if (showingEverything) {
+      // setCount(count + 100)
+      return undefined
     }
+    const raf = requestAnimationFrame(() => setCount( count + 30))
+    return () => cancelAnimationFrame(raf)
   }, [showingEverything, count])
   return <PortableText value={blocksToShow} components={ptComponents} />
 }
@@ -64,7 +72,9 @@ const root = createRoot(document.getElementById('demo-root')!)
 root.render(
   <StrictMode>
     <ThemeProvider theme={studioTheme}>
-      <Demo />
+      <Suspense fallback={<div>Loading...</div>}>
+        <Demo />
+      </Suspense>
     </ThemeProvider>
   </StrictMode>,
 )

package.json

@@ -54,6 +54,8 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.2",
     "@changesets/cli": "^2.29.8",
+    "@portabletext/react-latest": "npm:@portabletext/react@latest",
+    "@sanity/client": "^7.13.1",
     "@sanity/tsconfig": "^2.0.0",
     "@sanity/tsdown-config": "^0.4.0",
     "@sanity/ui": "^3.1.11",
@@ -77,7 +79,6 @@
     "refractor": "^5.0.0",
     "rimraf": "^5.0.1",
     "rollup-plugin-visualizer": "^6.0.5",
-    "@portabletext/react-latest": "npm:@portabletext/react@latest",
     "styled-components": "npm:@sanity/css-in-js@6.1.26",
     "tsdown": "^0.17.2",
     "typescript": "5.9.3",