How to animate realtime / interval based data using cesium js?

CesiumJS
1

I have added code with respect to flight animation documentation and im able to animate history of data or array of data.
Following is the code same is asked on stackoverflow

<style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar">
    <button class="cesium-button cesium-button-toolbar" 
    type="button" id="zoomtolastcoordinate">N-1</button>
    <button class="cesium-button cesium-button-toolbar" 
    type="button" id="track">Track</button>
    <button class="cesium-button cesium-button-toolbar" 
    type="button" id="line">Line</button>
    <button class="cesium-button cesium-button-toolbar" 
    type="button" id="terrain">OsmTerrain</button>
</div>


const map = new Cesium.Viewer('cesiumContainer');
const osmBuildingsTileset = Cesium.createOsmBuildings();

function zoomtolatlon(lon, lat)
{

  map.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(lon,lat,300),
    orientation: {
      heading: Cesium.Math.toRadians(10),
      pitch: Cesium.Math.toRadians(-10),
    },
  });			
}

const routeData = [
  { lon : 77.60834078421288, lat : 12.977258721643523 },
  { lon : 77.60657052626306, lat : 12.97782328094725 },
  { lon : 77.60492519760318, lat : 12.978360573141243 }
];

function plotroutepoints(position)
{
  map.entities.add({
        position: position,
        point: { pixelSize: 5, color: Cesium.Color.RED ,
               heightReference: Cesium.HeightReference.CLAMP_TO_GROUND//RELATIVE_TO_GROUND
               }
  });
}

function plotrouteline(waypoint)
{
  let degArray = [];
  let ellipsoid = map.scene.globe.ellipsoid;
  for(let coord of waypoint)
  {
    const position = Cesium.Cartesian3.fromDegrees(coord.lon, coord.lat);//height
    const cartographic = ellipsoid.cartesianToCartographic(position);
    let longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
    let latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
    degArray.push(longitudeString,latitudeString);
  }
  map.entities.add({
    //id: "route",
      polyline: {
      clampToGround: true,
      positions: Cesium.Cartesian3.fromDegreesArray(
        degArray),
      width: 20,
      material: new Cesium.PolylineArrowMaterialProperty(
        Cesium.Color.PURPLE
      ),
    },
  });

}

function trackVehicle(vehicleid, waypoints, timeStepInSeconds = 60)
{
  const positionProperty = new Cesium.SampledPositionProperty();

  //get current date and time
  const currentdate = new Date();
  const date = new Date(Date.UTC(currentdate.getFullYear(), (currentdate.getMonth()),currentdate.getDate(), currentdate.getHours(), currentdate.getMinutes(), currentdate.getSeconds()));
  //sampling start time 
  const start = Cesium.JulianDate.fromIso8601(date.toISOString());
  //random time for coordinate array for trip to finish
  const totalSeconds = timeStepInSeconds * (waypoints.length - 1);
  //sampling stop time
  const stop = Cesium.JulianDate.addSeconds(start,  totalSeconds, new Cesium.JulianDate());
  
  console.log("Duration in seconds : "+totalSeconds+ " in minutes "+(totalSeconds/60));
  
  //setting cesium clock
  map.clock.startTime = start.clone();
  map.clock.stopTime = stop.clone();
  map.clock.currentTime = start.clone();
  map.timeline.zoomTo(start, stop);
  
  console.log("Time is set");
  
  for (let i = 0; i < waypoints.length; i++) {
    const position = Cesium.Cartesian3.fromDegrees(waypoints[i].lon, waypoints[i].lat);//height
    const time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate());

    plotroutepoints(position);//dataPoint.height
    //adding timestamp and coordinate
    positionProperty.addSample(time, position);
  }
  
   async function loadModel() {
    // Load the glTF model from Cesium ion.
    const vehicleEntity = map.entities.add({
      availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: start, stop: stop }) ]),
      //how to know when this animation so to trigger next data
      position: positionProperty,
      // Attach the 3D model instead of the green point.
      model: { 
        uri: "../SampleData/models/GroundVehicle/GroundVehicle.glb",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,//RELATIVE_TO_GROUND,
        scale: 1,
        /** shadows: Cesium.ShadowMode.ENABLED, **/
        maximumScale:32
      },
      // Automatically compute the orientation from the position.
      orientation: new Cesium.VelocityOrientationProperty(positionProperty),    
      path: {
        show: true,
        leadTime: 0,
        trailTime: totalSeconds,//( 365 * 24 * 60 * 60 ), //totalSeconds,//dont remove trail line for one year
        width: 1,
        resolution: 1,
        clampToGround: true,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND//,RELATIVE_TO_GROUND,

        //distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5000.0)
      }
    });

    map.trackedEntity = vehicleEntity;
  }
  loadModel();
}

document.getElementById("line").onclick = function() {
  plotrouteline(routeData);
};

document.getElementById("zoomtolastcoordinate").onclick = function() {
  zoomtolatlon(routeData[0].lon,routeData[0].lat);
};

document.getElementById("track").onclick = function() {
  trackVehicle('KA1012', routeData);
};

document.getElementById("terrain").onclick = function() {
  let scene = map.scene;
  scene.terrainProvider = Cesium.createWorldTerrain();
  map.scene.primitives.add(osmBuildingsTileset);
};

Is their any call back to know if animation is complete so to update entity position before the entity disappears ?
Is their an another compatible approach ? like this
using TimeIntervalCollectionProperty instead of Sampled Property … ?
Can any one suggest or help ?
How to animate interval of data ?

Thank you so much.