Detect when a ShapeSource finished loading its url GeoJson data in react-native

Question

I'm using the react-native-mapbox-gl/maps library in my react-native app, and I'm trying to show a <MapboxGL.ShapeSource that loads a GeoJson source, like this.

I have this code that is working, however, as the GeoJson data takes a while to finish loading, I couldn't find a way to show to the user if the data is loading or it is ready, with a Spinner for instance.

My question is: is there a way to detect when the MapboxGL.ShapeSource finishes loading its data or when the MapboxGL.FillLayer is visible in the Map?

import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';

const DemographicsMapLayer = () => {  

  const dataSourceUri = 'https://gist.githubusercontent.com/victor0402/dc3b40195a55ed998a45189b7fb4939b/raw/d7021c29637621e07a82e771d89ea278de48fb99/demographics.json'

  return (
    <MapboxGL.ShapeSource id={'demographicSourceID'} url={dataSourceUri}>}
         <MapboxGL.FillLayer
            id={'Millenials'}
            key={'Millenials'}
            sourceID={'demographicSourceID'}
            filter={['==', '$type', 'Polygon']}
            style={{ fillOpacity: 0.4 }}
            onLayout={e => console.log('[FillLayer] onLayout', e)}
          />
    </MapboxGL.ShapeSource>

Version of the lib in my package.json file:

  "@react-native-mapbox-gl/maps": "^8.1.0-rc.9",

I tried using the onLayout event in both FillLayer and ShapeSource, but couldn't get useful information, maybe I'm looking the wrong thing.