Premise: I have a set of data (stops on the map)loaded via geoJSON in a clustered source, each of these stop locations can have a different icon.

I have over 140 variations of icons. I am iterating through all of them and I generate a "symbol" type layer for each one.
Also, I am loading each stop icon image(png format) via map.loadImage().

Problem: The issue that I am facing is that the loading time is very high and the map isn't smooth until all the layers are loaded and displayed.

Can you please help me with a suggestion on how to reduce the loading time and increase the performance?

TheLayer.tsx

export default React.memo(function MyStopsLayers(props: Props) {
  return (
    <>
      {ICONS.map(icon =>
        props.isEditMode ? (
          <EditStopLayer key={icon.id} icon={icon} {...props} />
        ) : (
          <StopLayer key={icon.id} iconType={icon} {...props} />
        ),
      )}
    </>
  );
});

StopLayer.tsx

const StopLayer: React.FC<Props & { icon: Icon }> = ({ icon, showOrderNumber }) => {
  return (
    <>
      <Layer
        key={icon.id}
        id={icon.id}
        type="symbol"
        source={MAP_CLUSTERS_SOURCE}
        filter={['all', ['!', ['has', 'point_count']], ['==', ['get', 'icon'], icon.id]]}
        paint={{}}
        layout={{
          'symbol-z-order': 'source',
          'symbol-sort-key': 1,
          'icon-image': icon.id,
          'icon-size': 0.5,
          'icon-allow-overlap': true,
        }}
      />
      {showOrderNumbers && (
        <Layer
          key={icon.id + 'orderNumber'}
          id={icon.id + 'orderNumber'}
          type="symbol"
          minzoom={15}
          source={MAP_CLUSTERS_SOURCE}
          filter={[
            'all',
            ['!', ['has', 'point_count']],
            ['==', ['get', 'icon'], iconType.id],
          ]}
          paint={{ 'text-halo-color': '#fff', 'text-halo-width': 15 }}
          layout={{
            'symbol-z-order': 'source',
            'text-field': showOrderNumber ? ['get', 'orderNo'] : '',
            'text-offset': [0, 1.25],
            'text-size': 15,
          }}
        />
      )}
    </>
  );
};