A very late response to an old post, but the trick I recently found that, so far, has gotten around this problem well is to hold off calling .refresh until after the layer has finished loading:
So the setThreshold function in the codepen becomes something like:
function layerCompletelyDrawnAndVisible(layer, view) {
let [watchUtils] = await loadModules(["esri/core/reactiveUtils"]);
let layerView = await view.whenLayerView(layer);
let layerId = await new Promise((resolve) => {
if (layerView.updating) {
watchUtils.when(
() => !layerView.updating,
() => {
return resolve(layer.id);
},
{
once: true,
}
);
} else return resolve(layer.id);
});
return layerId;
}
function setThreshold() {
thresholdVal = parseInt(threshold.value);
let { colors, stops } = getRasterStopsAndColors(
5000,
thresholdVal,
seedColors
);
//lercLayer.max = 3000;
lercLayer.threshold = thresholdVal;
lercLayer.stops = stops;
lercLayer.colors = colors;
//lercLayer.refresh();
layerCompletelyDrawnAndVisible(lercLayer, view).then(v => lercLayer.refresh())
}
// @ts-ignore
threshold.addEventListener("change", setThreshold);
that seems to deal with the problem nicely!