fix(troika-3d-ui): prevent sync of text nodes before flex layout finishes

This prevents a flash of incorrectly-sized text, though it can still
give a flash of old text; that should also be fixed in the future. This
is preferable in the short term because by skipping the initial sync it
frees up the worker thread to more quickly complete the flex layout.
This is particularly noticeable when the text nodes are extremely large.

Author: lojjic

packages/troika-3d-ui/src/facade/UITextNode3DFacade.js

@@ -3,14 +3,23 @@ import { Text3DFacade } from 'troika-3d-text'
 import { getInheritable } from '../uiUtils.js'
 
 const flexLayoutTextProps = ['text', 'font', 'fontSize', 'lineHeight', 'letterSpacing', 'whiteSpace', 'overflowWrap']
-
+const noop = () => {}
 
 /**
  * Wrapper for Text3DFacade that lets it act as a flex layout node. This shouldn't be used
  * directly, but will be created as an implicit child by {@link UIBlock3DFacade} when
  * configured with a `text` property.
  */
 class UITextNode3DFacade extends Text3DFacade {
+  constructor (props) {
+    super(props)
+
+    // Override the sync method so we can have control over when it's called
+    let mesh = this.threeObject
+    mesh._actuallySync = mesh.sync
+    mesh.sync = noop
+  }
+
   afterUpdate() {
     // Read computed layout
     const {
@@ -25,7 +34,6 @@ class UITextNode3DFacade extends Text3DFacade {
       let parent = this.parentFlexNode
       this.x = offsetLeft - parent.scrollLeft
       this.y = -(offsetTop - parent.scrollTop)
-      this.maxWidth = offsetWidth
 
       // Update clip rect based on parent
       const clipRect = this.clipRect || (this.clipRect = [0, 0, 0, 0])
@@ -50,11 +58,14 @@ class UITextNode3DFacade extends Text3DFacade {
       }
     }
 
-    this.threeObject.visible = hasLayout
-
     super.afterUpdate()
   }
 
+  onAfterFlexLayoutApplied() {
+    this.threeObject.maxWidth = this.offsetWidth
+    this.threeObject._actuallySync(this._afterSync)
+  }
+
   getBoundingSphere() {
     return null //parent UIBlock3DFacade will handle bounding sphere and raycasting
   }