How to display the Map when the polygon data is fetched correctly

[slim-hmidi1]

I call external API to fetch the polygon data, then I display the polygon into the map.

const Component = () => {
 const mainLayerStyle = {
      id: 'main',
      type: 'fill',
      source: 'maine',
      paint: {
        'fill-color': '#5009DC',
        'fill-opacity': 0.1,
      },
    };
    const outlineLayerStyle = {
      id: 'outline',
      source: 'main',
      type: 'line',
      paint: {
        'line-color': '#5009DC',
        'line-width': 2,
      },
    };
  const coordinates = { longitude: 'value here', latitude: 'value here' }
  const polygonData = usePolygonData(id)
  
  return (
    <Map
      data-testid="mapbox-element"
      ref={ref}
      mapboxAccessToken="token"
      initialViewState={{
        longitude: coordinates.longitude,
        latitude: coordinates.latitude,
        zoom,
      }}
      mapStyle="mapbox://styles/mapbox/streets-v12?optimize=true"
    >
      <Source type="geojson" data={polygonData}>
        <Layer {...mainLayerStyle} />
        <Layer {...outlineLayerStyle} />
      </Source>
    </Map>
  )
}

The app renders the map and it takes some seconds to displays the polygon, Is there any way using Mapbox to render the map with the polygon drawn into it or display some effects before rendering the polygon?