amchart indicator loading not stopping even chart is appear - amcharts

Question

im try using Amchart plugin into my system. Chart successful appear when i run basic code for chart. Then im try to use a custom for loading indicator. But the problem is indicator for loading not stopping even chart is appear.
Below is the JS script
am4core.useTheme(am4themes_animated);
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"category": "Research",
"value": 450
}, {
"category": "Marketing",
"value": 1200
}, {
"category": "Distribution",
"value": 1850
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
//categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
var indicator;
var indicatorInterval;
function showIndicator() {
if (!indicator) {
indicator = chart.tooltipContainer.createChild(am4core.Container);
indicator.background.fill = am4core.color("#fff");
indicator.width = am4core.percent(100);
indicator.height = am4core.percent(100);
var indicatorLabel = indicator.createChild(am4core.Label);
indicatorLabel.text = "Loading stuff...";
indicatorLabel.align = "center";
indicatorLabel.valign = "middle";
indicatorLabel.dy = 50;
var hourglass = indicator.createChild(am4core.Image);
hourglass.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/hourglass.svg";
hourglass.align = "center";
hourglass.valign = "middle";
hourglass.horizontalCenter = "middle";
hourglass.verticalCenter = "middle";
hourglass.scale = 0.7;
}
indicator.hide(0);
indicator.show();
clearInterval(indicatorInterval);
indicatorInterval = setInterval(function() {
hourglass.animate([{
from: 0,
to: 360,
property: "rotation"
}], 2000);
}, 3000);
}
function hideIndicator() {
indicator.hide();
clearInterval(indicatorInterval);
}
showIndicator();
Below is the html code
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
im already try a few method, but no lucky for me. Any suggestion

Answer 1

On amchart4 documentation (https://www.amcharts.com/docs/v4/tutorials/custom-loading-indicator/), it only shows how you can create a custom loading indicator. It doesn't hook up hideIndicator() event when the chart is finished rendering.
There is a Ready event you can use now (https://github.com/amcharts/amcharts4/issues/436#issuecomment-441370242). You can just simply hook up hideIndicator() function to the Ready event:
...
chart.events.on("ready", function(ev){
hideIndicator();
});
...
fiddle: https://jsfiddle.net/davidliang2008/akpe5f4b/1/