defer loading to address race condition with event subscriptions
Regarding this issue I opened in the main branch, I've found a fix for the race condition exposed when using React with pre-calculated peaks.
This PR picks out the { url, peaks, duration } props from the options object on initialization, and passes them to a new hook, useWavesurferLoad to trigger loading after the Wavesurfer instance is attached and all events are subscribed.
For your convenience, I've set up some tests in this demo project. This PR branch is included as a submodule. To set it up: clone the demo repo, run git submodule init, then run npm install && npm start.
When running the demo, you can choose between loading with or without peaks. I've added some buttons to toggle between media files and to increase/decrease the barWidth prop, just to show that this fix does not break/regress any previous functionality.
The test was expecting WaveSurfer.create() to be called with--among other things--the url parameter. But this whole PR is about pulling out the url parameter (along with peaks and duration) and calling them later via .load().
I updated the test to not expect url in .toHaveBeenCalledWith().
I also added a thorough example at examples/peaks, to simplify testing instead of using a separate demo repo.
I've made a PR in the main wavesurfer repo that will most likely fix this: https://github.com/katspaugh/wavesurfer.js/pull/3762
Please let me know if it didn't and we can reopen this PR. Thanks!