frontend performance improvements #59
1 changed files with 15 additions and 4 deletions
|
@ -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);
|
||||
};
|
||||
|
||||
watch(() => props.showing, show => {
|
||||
if (show) {
|
||||
if (!loopHandler) {
|
||||
loop();
|
||||
}
|
||||
} else if (loopHandler) {
|
||||
window.cancelAnimationFrame(loopHandler);
|
||||
loopHandler = undefined;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (loopHandler) {
|
||||
window.cancelAnimationFrame(loopHandler);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Reference in a new issue