woem.men/forkey
4
2
Fork 3
Code Issues 34 Pull requests 16 Projects Releases Packages Wiki Activity Actions

frontend performance improvements #59

Merged
sugar merged 2 commits from sugar/forkey:frontend-performance-improvements into main 2025-02-07 18:36:40 +00:00
Conversation 0 Commits 2 Files changed 2 +15 -4
1 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 71606c5507 - Show all commits

15
packages/frontend/src/components/MkTooltip.vue
View file

@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <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 * as os from '@/os.js';
import { calcPopupPosition } from '@/scripts/popup-position.js'; import { calcPopupPosition } from '@/scripts/popup-position.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
@ -70,7 +70,7 @@ function setPosition() {
el.value.style.top = data.top + 'px'; el.value.style.top = data.top + 'px';
} }
let loopHandler; let loopHandler: number | undefined;
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
@ -81,12 +81,23 @@ onMounted(() => {
loopHandler = window.requestAnimationFrame(loop); loopHandler = window.requestAnimationFrame(loop);
}; };
watch(() => props.showing, show => {
if (show) {
if (!loopHandler) {
loop(); loop();
}
} else if (loopHandler) {
window.cancelAnimationFrame(loopHandler);
loopHandler = undefined;
}
});
}); });
}); });
onUnmounted(() => { onUnmounted(() => {
if (loopHandler) {
window.cancelAnimationFrame(loopHandler); window.cancelAnimationFrame(loopHandler);
}
}); });
</script> </script>