How to listen for completion with troika three text and react three fiber

Questions
#1

Hi all. I have a project with a lot of text objects in the 3D space so I’m trying out troika-three-text.
Text loads perfect but i figured out that text loads async. I want to add some preloader till text loading, but i dont know how a can listen for completion.
In docs i found some events like sync, synccomplete and syncstart, but how i can use it with react native and react three fiber?

import React from 'react';
import { extend } from "react-three-fiber";
import { Text } from "troika-three-text";

extend({ Text });

export const TestName = ({value, textOptions, labelOffset, onPress}) => {
  return (
    <group position={labelOffset}>
      <mesh position={[0, 0, 0]} onClick={onPress}>
        <planeGeometry
          args={[
            textOptions.size * 1.3 + textOptions.size * 0.75 * value.length,
            textOptions.size * 1.9
          ]}
          attach="geometry"
        />
        <meshBasicMaterial color={0xffffff} attach="material" />
      </mesh>

      <mesh>
        <text
          fontSize={textOptions.size * 1.4}
          color="black"
          text={value}
          anchorX="center"
          anchorY="middle"
        />
      </mesh>
    </group>
  )
}

export default TestName;

Sorry for bad english. Thanks for any help!

#2

Maybe preloadFont would help?

Or, if for each label there’s a chance you’d be loading a new font - you can also listen to sync events (docs) and assume first sync means the text is ready.

#3

I have already tried init preloadFont before function, but it didnt help. Also i tried set to text component sync option (some like <text fontSize={textOptions.size * 1.4} color="black" text={value} anchorX="center" anchorY="middle" sync={..some code} /> ) and it didnt help