Resium CZML source update problem

The performance of the application was very low due to a heavy czml file. Therefore, it is split into 24 files and each file contains the czml data within 1 hour.

Those files are stored in a state ‘allCzml’ and are shown by Resium CzmlDataSource.
e.g allCzml = {
0000: [czml],
0100: [czml],
0200: [czml],


When I tick the timeline, if current hour (which means the data within that hour are showing on screen ) is different from the selected hour (new hour range ticked), the app loads the czml for that hour from allCzml.
For example, the current datetime is 10:05 and the 1000 czml dataset is loaded. If I tick the timeline as 12:30, the 1200 set is loaded. The code is shown as below

const updateCzml = (selectedDatetime) => {
if (currDatetime !== selectedDatetime) {

		if (selectedDatetime in allCzml) {
		} else {

		setTimeout(() => {
		}, 1);

My problems are:

  1. The czml data is first disappearing until the new set of czml is loaded. Since the time gap of the czml update is about 2-3 seconds, the screen shows nothing during this period. It is not ideal.
  2. I found that the current scene is not updated unless setTimeout is added.Is there any other method to ‘force’ the cesium to render again?
  3. Any method can trace the loading progress of czml file? At least I can show a progress bar in front end