fix: FIT-173: Follow up fix: Spectrogram initial render

[cloudmark]

Fix: Spectrogram Initialization Issue

Reason for Change

Currently, the spectrogram visualization does not appear immediately upon initialization unless there is user interaction (scrolling or zooming). This is a visual bug that affects the user experience as the spectrogram data is loaded but not rendered until interaction occurs.

Solution

We've implemented a deferred draw mechanism that triggers the initial render of the spectrogram shortly after initialization. This ensures the spectrogram is visible immediately without requiring user interaction.

Technical Details

• Added a small delay (100ms) after initialization before triggering the first draw
• This delay allows the canvas and WebGL context to be fully ready
• The draw is triggered automatically without requiring user interaction
• Subsequent draws continue to work as before with user interactions

Testing

1. Verified the spectrogram appears immediately upon initialization
2. Confirmed that subsequent interactions (zoom/scroll) continue to work normally
3. Tested across different browsers (Chrome, Firefox, Safari)
4. Verified performance impact is minimal

Visual Evidence

• Before the fix: Shows the spectrogram not appearing until user interaction
• After the fix: Demonstrates the spectrogram appearing immediately upon initialization

Risks

• Low risk change as it only affects the initial render timing
• No impact on data processing or core functionality
• Small performance overhead from the additional draw call, but negligible

Rollout Strategy

• This is a bug fix that can be deployed directly
• No feature flags or environment variables required
• Can be rolled out with normal deployment process

Reviewer Notes

• Focus on the timing of the initial draw call
• Verify that the spectrogram appears immediately on page load
• Check that the solution doesn't introduce any performance issues
• Review the video evidence to confirm the fix works as expected

Related Issue

#7761

General Notes

This fix improves the user experience by ensuring the spectrogram is visible immediately upon initialization, making the visualization more intuitive and reducing potential user confusion about whether the data has loaded correctly.

[netlify]

👷 Deploy request for heartex-docs pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0760158

[netlify]

👷 Deploy request for label-studio-docs-new-theme pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0760158

[netlify]

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	0760158
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/6852b05c7edb7200080ddd87
😎 Deploy Preview	https://deploy-preview-7762--label-studio-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for label-studio-playground ready!

Name	Link
🔨 Latest commit	0760158
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/6852b05c7803490008b04bb2
😎 Deploy Preview	https://deploy-preview-7762--label-studio-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[cloudmark]

Tested it out and this does not work @bmartel , we need the timeout to defer a bit later, best to keep my changes for consistency