Improve modal performance

1 files changed, 17 insertions, 2 deletions

diff --git a/src/client/components/ui/modal.vue b/src/client/components/ui/modal.vue
index 23c153e5f7..ebe7eb0014 100644
--- a/src/client/components/ui/modal.vue
+++ b/src/client/components/ui/modal.vue
@@ -1,10 +1,10 @@
 <template>
-<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+<div class="mk-modal" v-hotkey.global="keymap" :style="{ display, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 	<transition :name="$store.state.animation ? 'modal-bg' : ''" appear>
 		<div class="bg _modalBg" v-if="manualShowing != null ? manualShowing : showing" @click="onBgClick"></div>
 	</transition>
 	<div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
-		<transition :name="$store.state.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="$emit('closed')" @enter="$emit('opening')" @after-enter="childRendered">
+		<transition :name="$store.state.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
 			<slot v-if="manualShowing != null ? true : showing" v-bind:showing="manualShowing"></slot>
 		</transition>
 	</div>
@@ -52,6 +52,7 @@ export default defineComponent({
 			fixed: false,
 			transformOrigin: 'center',
 			contentClicking: false,
+			display: this.manualShowing == null ? 'block' : 'none',
 		};
 	},
 	computed: {
@@ -64,6 +65,15 @@ export default defineComponent({
 			return this.src != null;
 		}
 	},
+	watch: {
+		manualShowing: {
+			handler(v) {
+				console.log(v);
+				if (v) this.display = 'block';
+			},
+			immediate: true
+		}
+	},
 	mounted() {
 		this.$watch('src', () => {
 			this.fixed = getFixedContainer(this.src) != null;
@@ -163,6 +173,11 @@ export default defineComponent({
 		onBgClick() {
 			if (this.contentClicking) return;
 			this.$emit('click');
+		},
+
+		onClosed() {
+			this.$emit('closed');
+			this.display = 'none';
 		}
 	}
 });