..F....... [ZBX-21687] fixed persistent preloader icons over dashboard widgets on Safari 16

Merge in ZBX/zabbix from feature/ZBX-21687-6.0 to release/6.0

* commit '20e78dab2abbbf8e28966f89ed766160c895e1fe':
  ..F....... [ZBX-21687] fixed persistent preloader icons over dashboard widgets on Safari 16 #3
  ..F....... [ZBX-21687] fixed persistent preloader icons over dashboard widgets on Safari 16 #2
  ..F....... [ZBX-21687] fixed persistent preloader icons over dashboard widgets on Safari 16

(cherry picked from commit 6c979a2f11f20bf2e5781740761ae6986b17a158)

2 files changed, 27 insertions, 1 deletions

diff --git a/ChangeLog.d/bugfix/ZBX-21687 b/ChangeLog.d/bugfix/ZBX-21687
new file mode 100644
index 00000000000..111d856e167
--- /dev/null
+++ b/ChangeLog.d/bugfix/ZBX-21687
@@ -0,0 +1 @@
+..F....... [ZBX-21687] fixed persistent preloader icons over dashboard widgets on Safari 16 (averza)
diff --git a/ui/js/widgets/class.widget.js b/ui/js/widgets/class.widget.js
index e366479402d..2b5456d2f41 100644
--- a/ui/js/widgets/class.widget.js
+++ b/ui/js/widgets/class.widget.js
@@ -122,6 +122,8 @@ class CWidget extends CBaseComponent {
 		this._update_retry_sec = 3;
 		this._show_preloader_asap = true;
 		this._resizable_handles = [];
+
+		this._hide_preloader_animation_frame = null;
 	}
 
 	// Logical state control methods.
@@ -816,15 +818,38 @@ class CWidget extends CBaseComponent {
 	}
 
 	_showPreloader() {
+		// Fixed Safari 16 bug: removing preloader classes on animation frame to ensure removal of icons.
+
+		if (this._hide_preloader_animation_frame !== null) {
+			cancelAnimationFrame(this._hide_preloader_animation_frame);
+			this._hide_preloader_animation_frame = null;
+		}
+
 		this._content_body.classList.add('is-loading');
 		this._content_body.classList.remove('is-loading-fadein', 'delayed-15s');
 	}
 
 	_hidePreloader() {
-		this._content_body.classList.remove('is-loading', 'is-loading-fadein', 'delayed-15s');
+		// Fixed Safari 16 bug: removing preloader classes on animation frame to ensure removal of icons.
+
+		if (this._hide_preloader_animation_frame !== null) {
+			return;
+		}
+
+		this._hide_preloader_animation_frame = requestAnimationFrame(() => {
+			this._content_body.classList.remove('is-loading', 'is-loading-fadein', 'delayed-15s');
+			this._hide_preloader_animation_frame = null;
+		});
 	}
 
 	_schedulePreloader() {
+		// Fixed Safari 16 bug: removing preloader classes on animation frame to ensure removal of icons.
+
+		if (this._hide_preloader_animation_frame !== null) {
+			cancelAnimationFrame(this._hide_preloader_animation_frame);
+			this._hide_preloader_animation_frame = null;
+		}
+
 		this._content_body.classList.add('is-loading', 'is-loading-fadein', 'delayed-15s');
 	}