jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix shape deployment in prod

This commit is contained in:
Jeff Emmett 2025-11-10 19:26:44 -08:00
parent f4e962fc45
commit be6b52a07f
1 changed files with 4 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/routes/Board.tsx
View File

@ -616,14 +616,13 @@ export function Board() {
}, [editor]); }, [editor]);
// Only render Tldraw when store is ready and synced // Only render Tldraw when store is ready and synced
// This ensures shapes are loaded before Tldraw initializes // Tldraw will automatically render shapes as they're added via patches (like in dev)
const hasStore = !!store.store const hasStore = !!store.store
const isSynced = store.status === 'synced-remote' const isSynced = store.status === 'synced-remote'
const hasShapes = store.store ? store.store.allRecords().filter((r: any) => r.typeName === 'shape').length > 0 : false
// Wait for store to be synced AND have shapes before rendering // Render as soon as store is synced - shapes will load via patches
// This ensures Tldraw mounts with shapes already in the store (like in dev) // This matches dev behavior where Tldraw mounts first, then shapes load
const shouldRender = hasStore && isSynced && hasShapes const shouldRender = hasStore && isSynced
if (!shouldRender) { if (!shouldRender) {
return ( return (
@ -635,16 +634,10 @@ export function Board() {
) )
} }
// Use shape count as key to force remount when shapes are loaded
// This ensures Tldraw re-initializes with all shapes, matching dev behavior
const shapeCount = store.store ? store.store.allRecords().filter((r: any) => r.typeName === 'shape').length : 0
const storeKey = `tldraw-${shapeCount}-${isSynced}`
return ( return (
<AutomergeHandleProvider handle={automergeHandle}> <AutomergeHandleProvider handle={automergeHandle}>
<div style={{ position: "fixed", inset: 0 }}> <div style={{ position: "fixed", inset: 0 }}>
<Tldraw <Tldraw
key={storeKey}
store={store.store} store={store.store}
shapeUtils={[...defaultShapeUtils, ...customShapeUtils]} shapeUtils={[...defaultShapeUtils, ...customShapeUtils]}
tools={customTools} tools={customTools}