fix: prevent memory leak in Visualizer component

[huyenltnguyen]

This PR:

• Is an attempt to reduce the CPU consumption by fixing a memory leak issue in the Visualizer component
• Related to The app is consuming high CPU #112

---

The issue can be reproduce by making the following changes to the code:

• Make the Main component render the Visualizer conditionally based on the playing state
• Add a console.log statement to this line

Expected behavior: When the user presses pause, the Visualizer component is unmounted, and there shouldn't be anything logged to the browser console.
Actual behavior: When the user presses pause, the Visualizer component is unmounted, and there are logs constantly printed in the browser console.

---

My fix for this is to move the recursion outside of the draw function, and implement start and stop functions that helps initiate and clean up animation loops instead.

References:

• Handle requestAnimationFrame loops: https://gist.github.com/jacob-beltran/aa114af1b6fd5de866aa365e3763a90b
• Delay component unmount: https://medium.com/@tomaszferens/delay-unmounting-of-the-component-in-react-8d6f6e73cdc

[huyenltnguyen]

I haven't been able to intensively test the CPU usage, but I do hope that it reduces some 🤞

[ahmaxed]

These are the errors I get after playing/pausing and playing again

[huyenltnguyen]

Hmm. I'm guessing that the AudioContext didn't finish resetting at the time we pressed play again.

I'm actually thinking about keeping the Visualizer in the DOM when the music is paused or when the user switches tab, but stop the draw function instead, so that we won't have to reinitialize the audio context again. I think this approach will help keep the animation transition smooth.

[huyenltnguyen]

@ahmadabdolsaheb I found that apparently ifvisible.js has a memory leak issue (serkanyersen/ifvisible.js#50), so I decided to use react-page-visibility instead.

This PR is ready for another round of review 🙂

[ahmaxed]

should we do (prevProps.playing !== this.props.playing && prevState.isTabVisible !== this.state.isTabVisible) so all of the conditions can stay in one block.

[ahmaxed]

Since they are changing, should we set the to states?

[ahmaxed]

not sure what rafId stands for.

[ahmaxed]

Thanks for the pr. see my nitpicks above, other than that LGMT