[ts][webcomponents] Stop RAF if tab is hidden.

spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts

@@ -153,6 +153,8 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 
 	private disposed = false;
 	private loaded = false;
+	private running = false;
+	private visible = true;
 
 	/**
 	 * appendedToBody is assegned in the connectedCallback.
@@ -284,27 +286,24 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 		}
 		this.input = this.setupDragUtility();
 
-		this.startRenderingLoop();
-	}
+		document.addEventListener('visibilitychange', this.visibilityChangeCallback);
 
-	private hasCssTweakOff () {
-		return this.noAutoParentTransform && getComputedStyle(this.parentElement!).transform === "none";
+		this.startRenderingLoop();
 	}
 
-	private running = false;
 	disconnectedCallback (): void {
 		const id = this.getAttribute('overlay-id');
 		if (id) SpineWebComponentOverlay.OVERLAY_LIST.delete(id);
 		// window.removeEventListener("scroll", this.scrolledCallback);
 		window.removeEventListener("load", this.loadedCallback);
 		window.removeEventListener("resize", this.windowResizeCallback);
+		document.removeEventListener('visibilitychange', this.visibilityChangeCallback);
 		window.screen.orientation.removeEventListener('change', this.orientationChangedCallback);
 		this.intersectionObserver?.disconnect();
 		this.resizeObserver?.disconnect();
 		this.input?.dispose();
 	}
 
-
 	static attributesDescription: Record<string, { propertyName: keyof OverlayAttributes, type: AttributeTypes, defaultValue?: any }> = {
 		"overlay-id": { propertyName: "overlayId", type: "string" },
 		"no-auto-parent-transform": { propertyName: "noAutoParentTransform", type: "boolean" },
@@ -325,6 +324,15 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 		return;
 	}
 
+	private visibilityChangeCallback = () => {
+		if (document.hidden) {
+			this.visible = false;
+		} else {
+			this.visible = true;
+			this.startRenderingLoop();
+		}
+	}
+
 	private windowResizeCallback = () => this.resizedCallback(true);
 
 	private resizedCallback = (onlyDiv = false) => {
@@ -352,6 +360,10 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 		}
 	}
 
+	private hasCssTweakOff () {
+		return this.noAutoParentTransform && getComputedStyle(this.parentElement!).transform === "none";
+	}
+
 	/**
 	 * Remove the overlay from the DOM, dispose all the contained widgets, and dispose the renderer.
 	 */
@@ -683,7 +695,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 		}
 
 		const loop = () => {
-			if (this.disposed || !this.isConnected) {
+			if (this.disposed || !this.isConnected || !this.visible) {
 				this.running = false;
 				return;
 			};