Using Audio Api: trying to use ActivityIndicator while audio is loading Not Working

Expo SDK
1

I’m using TouchableOpacity with an onPress event to trigger playing audio from a playlist on my app. I’ve set up an ActivityIndicator to show a spinner until my audio loads. Functionality is working perfectly on my iOS emulator, but not when I load the app through EXPO on my iPhone, in the Android Emulator or on an Android phone through EXPO app.

The issue is this:
When you press on the TouchableOpacity element to play the track, it seems to get stuck in the onPressIn phase of onPress until the loadAsync method is done. From a UX perspective, having the button appear to be “stuck” is strange. Beyond that, and more importantly, the onPress event is setup to trigger my ActivityIndicator/loader, but the ActivityIndicator/loader doesn’t get triggered until loadAsync finishes… which obviously defeats the point of having a loader.

When I run this on my iPhone, this behavior only happens the FIRST time I press a track to play it, on subsequent presses the behavior is as expected. The issue is persistent, regardless of presses on Android (emulator and real device).

This is the code that is triggered with onPress:

handlePlay = (track) => {
    if (this.newSoundInstance === null) {
      this.playNewEpisode(track);
    } else {
      this.newSoundInstance.stopAsync()
        .then(stopped => {
          this.playNewEpisode(track);
        });
    }
  }

playNewEpisode = (track) => {
    this.newSoundInstance = new Audio.Sound({ source: track.url });
    this.props.dispatch(playerActions.updateCurrentlyPlayingTrack('LOADING'));
    this.newSoundInstance.loadAsync()
      .then(loaded => {
        this.props.dispatch(playerActions.updateCurrentlyPlayingTrack(track.title));
        this.newSoundInstance.playAsync();
      });
  }

and I’ve setup Audio.setIsEnabledAsync(true) in componentDidMount

Could someone help me troubleshoot this to get consistent (and correct) behavior on both iPhone and Android?

Thanks!