Avoid fade out/in on updateDom when many calendars are used (#3220)

related to #3185 

* I have limited updated dom to one update
-> `updateDom()` is activated by a timer which resets when a new event
arrives (`CALENDAR_EVENTS`)

* I have set no speed to self update. I think it's not necessary
-> update it directly

If somebody can test and tell me result
In all case, I will patch my prod mirror for testing

CHANGELOG.md

@@ -21,6 +21,7 @@ _This release is scheduled to be released on 2024-01-01._
 
 ### Fixed
 
+- Avoid fade out/in on updateDom when many calendars are used
 - Fix the option eventClass on customEvents.
 - Fix yr API version in locationforecast call (#3227)
 - Fix cloneObject() function to respect RegExp (#3237)

modules/default/calendar/calendar.js

@@ -68,7 +68,8 @@ Module.register("calendar", {
 		coloredSymbol: false,
 		coloredBackground: false,
 		limitDaysNeverSkip: false,
-		flipDateHeaderTitle: false
+		flipDateHeaderTitle: false,
+		updateOnFetch: true
 	},
 
 	requiresVersion: "2.1.0",
@@ -93,8 +94,6 @@ Module.register("calendar", {
 
 	// Override start method.
 	start: function () {
-		const ONE_MINUTE = 60 * 1000;
-
 		Log.info(`Starting module: ${this.name}`);
 
 		if (this.config.colored) {
@@ -117,6 +116,9 @@ Module.register("calendar", {
 		// indicate no data available yet
 		this.loaded = false;
 
+		// data holder of calendar url. Avoid fade out/in on updateDom (one for each calendar update)
+		this.calendarDisplayer = {};
+
 		this.config.calendars.forEach((calendar) => {
 			calendar.url = calendar.url.replace("webcal://", "http://");
 
@@ -153,16 +155,7 @@ Module.register("calendar", {
 			this.addCalendar(calendar.url, calendar.auth, calendarConfig);
 		});
 
-		// Refresh the DOM every minute if needed: When using relative date format for events that start
+		this.selfUpdate();
-		// or end in less than an hour, the date shows minute granularity and we want to keep that accurate.
-		setTimeout(
-			() => {
-				setInterval(() => {
-					this.updateDom(1);
-				}, ONE_MINUTE);
-			},
-			ONE_MINUTE - (new Date() % ONE_MINUTE)
-		);
 	},
 
 	// Override socket notification handler.
@@ -184,6 +177,18 @@ Module.register("calendar", {
 				if (this.config.broadcastEvents) {
 					this.broadcastEvents();
 				}
+
+				if (!this.config.updateOnFetch) {
+					if (this.calendarDisplayer[payload.url] === undefined) {
+						// calendar will never displayed, so display it
+						this.updateDom(this.config.animationSpeed);
+						// set this calendar as displayed
+						this.calendarDisplayer[payload.url] = true;
+					} else {
+						Log.debug("[Calendar] DOM not updated waiting self update()");
+					}
+					return;
+				}
 			}
 		} else if (notification === "CALENDAR_ERROR") {
 			let error_message = this.translate(payload.error_type);
@@ -859,5 +864,30 @@ Module.register("calendar", {
 		}
 
 		this.sendNotification("CALENDAR_EVENTS", eventList);
+	},
+
+	/**
+	 * Refresh the DOM every minute if needed: When using relative date format for events that start
+	 * or end in less than an hour, the date shows minute granularity and we want to keep that accurate.
+	 * --
+	 * When updateOnFetch is not set, it will Avoid fade out/in on updateDom when many calendars are used
+	 * and it's allow to refresh The DOM every minute with animation speed too
+	 * (because updateDom is not set in CALENDAR_EVENTS for this case)
+	 */
+	selfUpdate: function () {
+		const ONE_MINUTE = 60 * 1000;
+		setTimeout(
+			() => {
+				setInterval(() => {
+					Log.debug("[Calendar] self update");
+					if (this.config.updateOnFetch) {
+						this.updateDom(1);
+					} else {
+						this.updateDom(this.config.animationSpeed);
+					}
+				}, ONE_MINUTE);
+			},
+			ONE_MINUTE - (new Date() % ONE_MINUTE)
+		);
 	}
 });