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.