Mapbox map.on('load') is extremely slow

I have a web app I am creating that maps 30k+ symbols, but my issue is that on initialization, the map.on('load') is way too slow. I've added timers all throughout my code and it is specifically this line of code that takes 10+ seconds to run.

I've looked through all of Mapbox's resources on performance but none of the suggestions work or are relevant, (e.g., minimize the amount of layers used even though my layers take 0.1 seconds to load, using vector tiles instead of GeoJSON data, changing the properties of the data source, minimizing features etc.).

Has anyone else had this issue and figured out how to resolve it? I've been trying for days to optimize this map but I can't figure it out!

// Set map properties with the predefined configuration
mapboxgl.accessToken =  'my access token';
    const map = new mapboxgl.Map({
        container: 'fullMap',
        style: 'mapbox://styles/mapbox/light-v10',
        center: [-100.83, 39.22], 
        zoom: 5,
    });

    startTime = performance.now();

    map.on('load', () => {

        endTime = performance.now(); // Ends up being 10+ seconds...

        map.addSource('gc_offices', {
            type: 'geojson',
            data: geojsonData,
            buffer: 0,
            cluster: true,
            clusterMaxZoom: 12, // Max zoom to cluster points on
            clusterRadius: 50,  // Radius of each cluster when clustering points 
        });
        
        map.addLayer({
            id: 'clusters',
            type: 'circle',
            source: 'gc_offices',
            paint: {
                'circle-color': [
                    'step',
                    ['get', 'point_count'],
                    '#2288f2',
                    5, '#3d97f5',
                    25, '#64abf5',
                    50, '#83bcf7',
                    100, '#a3ccf7',
                    250, '#cfe4fa',
                    500, '#eb4034'
                ],
                'circle-radius': [
                    'step',
                    ['get', 'point_count'],
                    13,
                    20, 18,
                    50, 25,
                    100, 30,
                    250, 40,
                    500, 50,
                ]
             }
        });

        map.addLayer({
            id: 'cluster-count',
            type: 'symbol',
            source: 'gc_offices',
            filter: ['has', 'point_count'],
            layout: {
                'text-field': '{point_count_abbreviated}',
                'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                'text-size': 12,
                'text-allow-overlap': true
            }
        });

        map.addLayer({
            id: 'locationData',
            type: 'symbol',
            source: 'gc_offices',
            minzoom: 10,
            layout: gc_office_layout_properties,
            paint: gc_office_paint_properties,
        });
    });