OpenLayers vectorssource update feature

Question

I am using the following code to plot weather readings on a map. It works but there is a very noticeable and annoying blink each time new readings are plotted.

function draw_map(current_obs) {
  vectorSource.clear();
  for (stn in current_obs) {
    addMarker(current_obs[stn]); // does vectorsource.addfeature()
  }
  vectorSource.changed(); // needed to redraw after adding markers
}
i=0;
//time_series is an array of current_obs data 
loop_timer = setInterval(() => {
  draw_map(time_series[i]);
  i = i + 1;
  if (i >= timeseries.length) { i = 0 };
}, 500);

Is there a way to make the transition between time steps visually smoother? I've thought about doing features individually using removeFeature()/addFeature()/changed() but I don't how to map existing features to station observations. (There are about 40 stations in the dataset, each having several parameters plotted on a single feature)

I'm using OpenLayers 5.3.0

---

Following the suggestion below I tried re-writing draw_map()

function draw_map(current_obs) {
features = []
for (let stn in current_obs) {
    //make_Marker returns a feature object rather than adding it
    features.push(make_Marker(current_obs[stn]))

}
vectorSource.clear();
vectorSource.addFeatures(features);
vectorSource.changed(); // needed to redraw after adding markers

}

However this did not seem to make a noticeable difference. So I tried refreshing each station individually (easy once I realized you can add arbitrary properties to a feature object).

function draw_map(current_obs) {
for (let stn in current_obs) {
    new_feature = make_Marker(current_obs[stn])
    vectorSource.forEachFeature(
            function(ft) {
                foundit = (stn === ft.get('station_name'))
                if (foundit) { vectorSource.removeFeature(ft) }
                return foundit
            })
    vectorSource.addFeature(new_feature);
    //new_feature.changed(); //this didnt seem to be needed
}

However even this did not seem to reduce the blinking.

My markers are using an SVG path for the ol.style.Icon element (a wind direction arrow) and commenting that out seems to greatly reduce the blinking so perhaps its just that rendering SVG takes too long. I will have to re-think that part.

Answer 1

Adding all the features in a single operation might help

  var features = [];
  for (stn in current_obs) {
    addMarker(current_obs[stn]); // pushes to features array
  }
  vectorSource.clear();
  vectorSource.addFeatures(features);