Подскажите в чем может быть проблема что компонент не исчезает только на телефоне. React

Компонент прелоудера не исчезает когда меняется стейт. В десктопных браузера все работает и отрабатывает как надо, но в мобильных бага

<div className="player__current-song">
   <p className="p">Сейчас звучит</p>
   {this.props.preload && <Preload active={true}/>}
   {!this.props.preload && <h3 className="h2 player__current-song--artist-title">{this.props.currentSong.artist}</h3>}
   {!this.props.preload && <h5 className="h3 player__current-song--song">{this.props.currentSong.name}</h5>}
</div>

 компонент прелоудера 

import React from 'react';
import {connect} from 'react-redux'
import './preloader.scss'



export default function(props){
    let className = [
        props.className, 'lds-ellipsis',
        props.active && 'lds-ellipsis--white',
    ].filter(Boolean).join(' ')
        return(
            <div className={className}><div></div><div></div><div></div><div></div></div>
        )
}

 то где происходит запуск, происходит когда пользователь нажимает на кнопку плей, после того как был получен первый сигнал аудиопотока, происходит отключение прелоудера. 

    import React, { createRef } from 'react';
import {connect} from 'react-redux'
import './smallPlayer.scss'
import {actionChangeAnimation} from '../../redux/reducers/actions/actions'
import SmallPlayerButton from './SmallPlayerButton/SmallPlayerButton'
import {actionPlay, actionChangeVolume} from '../../redux/reducers/actions/actions'
import {mock as api} from '../../api';
import Preload from '../Preloader/Preloader'
import {actionImportCurrentSong, actionPreload} from '../../redux/reducers/actions/actions'
class SmallPlayer extends React.Component{
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
      }
    state = {
        active: false,
        value: 5,
        preload: false
    }

    componentDidMount(){
        this.stream.current.addEventListener('waiting', this._preloadStart.bind(this))
        this.stream.current.addEventListener('loadedmetadata', this._preloadEnd.bind(this))
    }

    componentWillUnmount(){
        this.stream.current.removeEventListener('waiting', this._preloadStart)
        this.stream.current.removeEventListener('loadedmetadata', this._preloadEnd)
    }

    _preloadStart(){
        this.props.dispatchPreload(true)
        this.stream.current.removeEventListener('waiting', this._preloadStart)
    }

    _preloadEnd(){
        this.props.dispatchPreload(false)
    }

    _togglePlayButton(){
        if(this.props.active){
            this.props.changePlay(false)
            this.props.changeAnimation(false)
        }else{
            this.props.changePlay(true)
            this.props.changeAnimation(true)
        }
    }

    stream = React.createRef()
        _audioHandler(){

    }
    
    render(){
        console.log(this.props.preload)
        return(
            <div className="smallPlayer">
                <div className="smallPlayer__content">
                    <SmallPlayerButton active={this.props.active} onClick={()=>this._togglePlayButton()}/>
                    <audio className="stream" volume={this.props.volume} controls ref={this.stream}>
                        <source src="http://webradio.mcm.fm:10000/hit128" type="audio/mpeg"/>
                    </audio>
                    <img alt="img" className="smallPlayer__sub" src="https://gamerewrw.000webhostapp.com/mcm/media/sub.e38a10ce.svg"/>
                    <input onChange={(e)=> this.props.changeVolume(e.target.value)} className="smallPlayer__volume-input" value={this.props.volume} type="range" id="volume" name="cowbell" min="0" max="1"  step="0.1"/>
                    {this.props.preload && 
                    <Preload/>}
                    {!this.props.preload && <div className="smallPlayer__desc">
                        <h6 className="h6 smallPlayer__artist">{this.props.currentSong.artist}</h6>
                        <p className="smallPlayer__p">{this.props.currentSong.name}</p>
                    </div>}
                </div>
            </div>
        )
    }
}


function mapDispatchToProps(dispatch){
    return{
        changeAnimation: (stop) => dispatch(actionChangeAnimation(stop)),
        changePlay: (current) => dispatch(actionPlay(current)),
        changeVolume: (volumeLevel) => dispatch(actionChangeVolume(volumeLevel)),
        importCurrentSong: (song) => dispatch(actionImportCurrentSong(song)),
        dispatchPreload: (active) => dispatch(actionPreload(active))
    }
}


function mapStateToProps(state){
    return{
        active: state.playerReducer.active,
        volume: state.playerReducer.volume,
        preload: state.playerReducer.preload,
        currentSong: state.currentSongReducer.currentSong
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SmallPlayer)




// import React, { createRef } from 'react';
// import {connect} from 'react-redux'
// import './smallPlayer.scss'
// import {actionChangeAnimation} from '../../redux/reducers/actions/actions'
// import SmallPlayerButton from './SmallPlayerButton/SmallPlayerButton'
// import {actionPlay, actionChangeVolume} from '../../redux/reducers/actions/actions'
// import {mock as api} from '../../api';
// import Preload from '../Preloader/Preloader'
// import {actionImportCurrentSong, actionPreload} from '../../redux/reducers/actions/actions'
// class SmallPlayer extends React.Component{

//     state = {
//         active: false,
//         value: 5,
//         preload: false
//     }

//     componentDidMount(){
//         document.querySelector('audio').addEventListener('waiting', this._preloadStart.bind(this))
//         document.querySelector('audio').addEventListener('loadedmetadata', this._preloadEnd.bind(this))
//     }

//     componentWillUnmount(){
//         document.querySelector('audio').removeEventListener('waiting', this._preloadStart)
//         document.querySelector('audio').removeEventListener('loadedmetadata', this._preloadEnd)
//     }

//     _preloadStart(){
//         this.props.dispatchPreload(true)
//         document.querySelector('audio').removeEventListener('waiting', this._preloadStart)
//     }

//     _preloadEnd(){
//         this.props.dispatchPreload(false)
//     }

//     _togglePlayButton(){
//         if(this.props.active){
//             this.props.changePlay(false)
//             this.props.changeAnimation(false)
//         }else{
//             this.props.changePlay(true)
//             this.props.changeAnimation(true)
//         }
//     }

//     stream = React.createRef()
//     _audioHandler(){

//     }
    
//     render(){
//         console.log(this.props.preload)
//         return(
//             <div className="smallPlayer">
//                 <div className="smallPlayer__content">
//                     <SmallPlayerButton active={this.props.active} onClick={()=>this._togglePlayButton()}/>
//                     <audio className="stream" volume={this.props.volume} controls ref={this.stream}>
//                         <source src="http://webradio.mcm.fm:10000/hit128" type="audio/mpeg"/>
//                     </audio>
//                     <img alt="img" className="smallPlayer__sub" src="https://gamerewrw.000webhostapp.com/mcm/media/sub.e38a10ce.svg"/>
//                     <input onChange={(e)=> this.props.changeVolume(e.target.value)} className="smallPlayer__volume-input" value={this.props.volume} type="range" id="volume" name="cowbell" min="0" max="1"  step="0.1"/>
//                     {this.props.preload && 
//                     <Preload/>}
//                     {!this.props.preload && <div className="smallPlayer__desc">
//                         <h6 className="h6 smallPlayer__artist">{this.props.currentSong.artist}</h6>
//                         <p className="smallPlayer__p">{this.props.currentSong.name}</p>
//                     </div>}
//                 </div>
//             </div>
//         )
//     }
// }


// function mapDispatchToProps(dispatch){
//     return{
//         changeAnimation: (stop) => dispatch(actionChangeAnimation(stop)),
//         changePlay: (current) => dispatch(actionPlay(current)),
//         changeVolume: (volumeLevel) => dispatch(actionChangeVolume(volumeLevel)),
//         importCurrentSong: (song) => dispatch(actionImportCurrentSong(song)),
//         dispatchPreload: (active) => dispatch(actionPreload(active))
//     }
// }


// function mapStateToProps(state){
//     return{
//         active: state.playerReducer.active,
//         volume: state.playerReducer.volume,
//         preload: state.playerReducer.preload,
//         currentSong: state.currentSongReducer.currentSong
//     }
// }

// export default connect(mapStateToProps, mapDispatchToProps)(SmallPlayer)