From 71606c55071f7346cdfbb5d75b378d5668d2776f Mon Sep 17 00:00:00 2001
From: sugar <sugar@sylveon.social>
Date: Sun, 2 Feb 2025 17:33:33 +0100
Subject: [PATCH] avoid computing tooltip position every frame

this fixes an issue causing misskey to constantly recompute tooltip
position when any kind of chart is being displayed (such as the one
on user profile page, or any page for unauthenticated users)
---
 .../frontend/src/components/MkTooltip.vue     | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkTooltip.vue b/packages/frontend/src/components/MkTooltip.vue
index 2a232cc2a..119c99feb 100644
--- a/packages/frontend/src/components/MkTooltip.vue
+++ b/packages/frontend/src/components/MkTooltip.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, shallowRef } from 'vue';
+import { nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue';
 import * as os from '@/os.js';
 import { calcPopupPosition } from '@/scripts/popup-position.js';
 import { defaultStore } from '@/store.js';
@@ -70,7 +70,7 @@ function setPosition() {
 	el.value.style.top = data.top + 'px';
 }
 
-let loopHandler;
+let loopHandler: number | undefined;
 
 onMounted(() => {
 	nextTick(() => {
@@ -81,12 +81,23 @@ onMounted(() => {
 			loopHandler = window.requestAnimationFrame(loop);
 		};
 
-		loop();
+		watch(() => props.showing, show => {
+			if (show) {
+				if (!loopHandler) {
+					loop();
+				}
+			} else if (loopHandler) {
+				window.cancelAnimationFrame(loopHandler);
+				loopHandler = undefined;
+			}
+		});
 	});
 });
 
 onUnmounted(() => {
-	window.cancelAnimationFrame(loopHandler);
+	if (loopHandler) {
+		window.cancelAnimationFrame(loopHandler);
+	}
 });
 </script>