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

[Gonza462]

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/

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,
      },
    });
  });
});

[karimnaaji]

Does this happen with version above 0.50.0?

[Gonza462]

Does this happen with version above 0.50.0?

I have updated mapbox to the latest version and it seemed to fix the issue of the markers disappearing at different zoom levels. However, the markers sometimes don't show up when you visit the website for the first time and I don't know why. I have updated the code that I have currently.