Region virtualisation: rapid removal and creation of large numbers of regions appears to be glitchy since 7.8.0

[katspaugh]

Discussed in #3841

^{Originally posted by rewbs August 26, 2024}
Hi all,

I have a UI that uses regions to represent beat positions in a track. The region positions are calculated based on the BPM and beat offset. The user can change the BPM and beat offset with a slider, which updates the beat markers in real time.

The way I'm doing this is quite naive, but worked well up until 7.8.0. When the BPM or offset changes, I simply delete all the "beat" regions like regionsPlugin.getRegions().filter(r => r.id.includes('beat')).forEach(r => r.remove()) (I can't simply clear all regions because there are non-beat regions I need to keep) , and then re-invoke regionsPlugin.addRegion() for each updated beat position.

Here it is in action in 7.7.15:

ws-7.7.15.mp4

But as of 7.8.0, there is a lag and a refresh issue (only change here is the WaveSurfer version, no change in my code):

ws-7.8.0.mp4

Does this feel like a regression in Wavesurfer or is my approach brain-dead? I notice 7.8.0 introduced some virtualisation for regions, which I assume is related.

For further context I'm using @wavesurfer/react 1.0.7 and Chrome on MacOS.

If there's consensus this is a bug or unexpected (as opposed to me being an idiot), I'm happy to work on a simple recreate case.

Cheers,
Robin

[laubonghaudoi]

I am having the same issue. Sometimes it leads to all regions being re-rendered without clearing the ones from the previous render, resulting in the same regions stacking on top of the ones from the previous render.

[katspaugh]

@laubonghaudoi thanks, I understand the issue better now.

As a workaround, try adding a timeout before creating new regions.