Custom image marker don’t load on “load” cold start

Nobody has claimed this yet.

**mapbox-gl-js version**:
“mapbox-gl”:"^1.12.0",
**browser**: I have experienced this on mobile safari and google chrome
and on desktop google chrome and IE.

### Steps to Trigger Behavior

1. Visit my website to see behavior
2. https://foodapp-f2809.web.app/
3.

### Link to Demonstration

https://jsbin.com/

### Expected Behavior

When you visit the web app the location markers should ALWAYS show on load.

### Actual Behavior
Usually on first time visiting the web app the markers will not show. Once you reload they usually show MOST of the time.

Things I’ve tried:
I tried to set layout properties
“icon-ignore-placement”: true
“icon-allow-overlap”: true

But that doesn’t work.

As for why the markers don’t show on the first LOAD I have no idea why.
This is my code for the markers

componentDidMount() {
mapboxgl.accessToken = accessToken;

var map = new mapboxgl.Map({
container: "map", // html element id in render
style: `mapbox://styles/gonza462`,
center: [lon, lat], // note lon comes before lat - geoJSON convention
zoom: [zoomScale],
});
axios
.get("...../api/locations")
.then((res) => {
console.log(res.data);
this.setState({
locations: res.data,
});
})
.catch((err) => console.error(err));

map.flyTo({
center: [-87.9202306, 42.9628803],
speed: 1.5,
zoom: 16,
pitch: 45,
bearing: 27,
});

const { setStyle, setInitialStations } = this.props;

map.loadImage("/bluemark.png", function(error, image) {
if (error) throw error;
map.addImage("truck", image);
});
map.on("load", async () => {
await setInitialStations().then(() => {
const { chargingStations } = this.props;
map.addSource("point-truck", {
type: "geojson",
data: {
type: "FeatureCollection",
features: this.state.locations.map((truck) => {
return {
type: "Feature",
geometry: {
type: "Point",
coordinates: [truck.longitude, truck.latitude],
},
properties: {
name: truck.name,
phone: truck.phone,
address: truck.address,
},
};
}),
},
});

map.addLayer({
id: "allStations",
type: "symbol",
source: "point-truck",
layout: {
"icon-image": "truck",
"icon-size": 0.4,
"icon-allow-overlap": true,
"text-allow-overlap": true,
},
});
});
});

Start with the supplied website and the componentDidMount entry point, focusing on map.loadImage and the map.on("load") handler. Reproduce a cold load in the listed browsers and observe the custom marker initialization. Done means the truck markers appear reliably on the first visit without requiring a reload.

Written by the indexing model from the issue text.