fix: OPTIC-1125: Label config preview always showing a step behind when making updates

[bmartel]

PR fulfills these requirements

• Commit message(s) and PR title follows the format [fix|feat|ci|chore|doc]: TICKET-ID: Short description of change made ex. fix: DEV-XXXX: Removed inconsistent code usage causing intermittent errors
• Tests for the changes have been added/updated (for bug fixes/features)
• Docs have been added/updated (for bug fixes/features)
• Best efforts were made to ensure docs/code are concise and coherent (checked for spelling/grammatical errors, commented out code, debug logs etc.)
• Self-reviewed and ran all changes on a local instance (for bug fixes/features)

Change has impacts in these area(s)

(check all that apply)

• Product design
• Backend (Database)
• Backend (API)
• Frontend

Describe the reason for change

The change originally made to fix an issue with taxonomy loading after updating the Label Config made it such that the preview was always a step behind changes that were made by the user. This addresses this by moving all the associated logic of updating and initializing to the same useEffect.

The following now occurs:

• Only a single initialization takes place for the preview
• Updates apply consistently on change of either config or task data.
• Only a single destroy will take place when the preview unmounts (important fix to the original issue!)

Does this PR introduce a breaking change?

(check only one)

• Yes, and covered entirely by feature flag(s)
• Yes, and covered partially by feature flag(s)
• No
• Not sure (briefly explain the situation below)

What level of testing was included in the change?

(check all that apply)

• e2e
• integration
• unit

Which logical domain(s) does this change affect?

Label Config Preview

[netlify]

✅ Deploy Preview for label-studio-docs-new-theme canceled.

Name	Link
🔨 Latest commit	b43b2e5
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-docs-new-theme/deploys/66ed9f911de39700087b060b

[netlify]

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	b43b2e5
🔍 Latest deploy log	https://app.netlify.com/sites/heartex-docs/deploys/66ed9f91132e4200089f4c3a

[hlomzik]

this way of calling it doesn't feel correct... besides of the comment from ellipsis it's also called synchronously.
or I'm just lacking some knowledge of dynamic import(). if you call it repeatedly and in parallel would the module be imported only once and the same instance will be returned in different places?

[bmartel]

if you call it repeatedly and in parallel would the module be imported only once and the same instance will be returned in different places?

Technically there is no parallel capability but the dynamic import will happen only once, right on the first render cycle of the component. That starts the async load, which then is awaited in the useEffect to ensure it completes. It all references the same promise, and only assigns it once.

This is basically the loader pattern introduced with React 18, and Suspense, but without all that jazz.

[bmartel]

As mentioned in DM, we can go with a different approach if you are feeling this is not resonating.