Adding region fails if wavesurfer is loading

[Schwankenson]

Bug description

I use wavesurfer as audio editor, where I often use loadBlob while the regions should stay active. Under some circumstances of asynchronous things, the addRegion is called when another event called the loadBlob function, and wavesurfer is still loading. In this case, the virtualAppend function of region Plugin does not add the region.

The isVisible check is false because wavesurfer is in loading mode andthis.wavesurfer.getDuration() returns 0;

private virtualAppend(region: Region, container: HTMLElement, element: HTMLElement) {
    const renderIfVisible = () => {
      if (!this.wavesurfer) return
      const clientWidth = this.wavesurfer.getWidth()
      const scrollLeft = this.wavesurfer.getScroll()
      const scrollWidth = container.clientWidth
      const duration = this.wavesurfer.getDuration()
      const start = Math.round((region.start / duration) * scrollWidth)
      const width = Math.round(((region.end - region.start) / duration) * scrollWidth) || 1

      // Check if the region is between the scrollLeft and scrollLeft + clientWidth
      const isVisible = start + width > scrollLeft && start < scrollLeft + clientWidth

      if (isVisible && !element.parentElement) {
        container.appendChild(element)
      } else if (!isVisible && element.parentElement) {
        element.remove()
      }
    }

    setTimeout(() => {
      if (!this.wavesurfer || !region.element) return
      renderIfVisible()

      const unsubscribeScroll = this.wavesurfer.on('scroll', renderIfVisible)
      const unsubscribeZoom = this.wavesurfer.on('zoom', renderIfVisible)

      this.subscriptions.push(region.once('remove', unsubscribeScroll), unsubscribeScroll)
      this.subscriptions.push(region.once('remove', unsubscribeZoom), unsubscribeZoom)
    }, 0)
  }

Solution is easy and clean
We can just add call to renderIfVisible on wavesurfer ready event:

const unsubscribeScroll = this.wavesurfer.on("scroll", renderIfVisible);
      const unsubscribeZoom = this.wavesurfer.on("zoom", renderIfVisible);
      const unsubscribeReady = this.wavesurfer.on("ready", renderIfVisible);

      this.subscriptions.push(
        region.once("remove", unsubscribeScroll),
        unsubscribeScroll
      );
      this.subscriptions.push(
        region.once("remove", unsubscribeZoom),
        unsubscribeZoom
      );
      this.subscriptions.push(
        region.once("remove", unsubscribeReady),
        unsubscribeReady
      );```


## Environment
All

[katspaugh]

That's the expected behavior. You should only add regions on ready or on decode. See https://wavesurfer.xyz/examples/?regions.js