Runtime Error in Threekit Player Bundle on multiple SetConfig() calls

I have a question about Treble and player updates using SetConfiguration() call.
Created a Treble app using npx create-treble-app@latest. Player is intialized using IntialConfig in threekit.config.js. I am rendering the Player in App.tsx as follows

File App.tsx:
<ThreekitProvider> 
  <div className="tk-treble-player"> 
    </Player > 
    <MyComponent /> 
  </div> 
</ThreekitProvider> 

and in MyComponent I have some code that runs setConfig in a for loop (Doing perfomance testing) and toggles between two valid configs.

const [attributes, setConfiguration] = useConfigurator();

What we saw was that if the wait time between two setConfig calls less than 3s, a runtime error in threekit bundle shows up.

We want to design around this by tracking when the Player is ‘loading’ a new configuration and not call SetConfig(), until the load is complete.

As per threekit Docs, The usePlayerLoadingStatus hook returns a single boolean value indicating whether the Threekit Player has rendered out a product configuration or is in the process of applying and rendering a change/new product configuration.

The hook will return true if the Player has finished its render and false when the configuration is changed until that change has been rendered and visualized by the Player.

const hasLoaded = usePlayerLoadingStatus();

However this hook is not behaving as expected. We’re seeing inconsistent return values and it doesn’t seem to be linked to when setConfig can be called.
Moreover, the hook return false when the Player has finished rendering, which is not following the documentation!!

Questions:

  • Is there a way to work around getting this console error? Its a non blocking error
  • How is this use case handled? How do we know when to next call SetConfig or is there a way for the Player to tell us when its ready other than usePlayerLoadingStatus?

We’ve already tried out const hasInitialized = useThreekitInitStatus(); . And since in the app the intitialization is done using threekit.config.js, this does not solve our problem.

Hi @Saket thanks for your patience while we investigated. This may occur if you try to set multiple configurations before the previous resolves. The loading hooks determine when the player has loaded initially, now between configuration changes.

While Treble has many hooks and components, you can still access the Threekit API directly in the window. There is a setConfiguration event you can listen for - maybe this will be helpful? You can wait for the configuration event to be fired before sending your next setConfiguration function.

Since you’re using Treble it may look something like this:

window.threekit.player.on('setConfiguration', e => {
   console.log(e);
})

Let me know if this is helpful.