Prevent LoadingImage from showing up when resizing window

Author: CommandString

client/src/components/LoadingImage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
+import {onMounted, type PropType, ref} from "vue";
 import type {Api} from "@shared/api";
 import GTASAArtwork from "@/assets/images/gtasa-artwork.jpg";
 import GTAIIIBG from "@/assets/images/iii-bg.png";
@@ -11,18 +11,31 @@ defineProps({
     }
 });
 
+const loadingImageRef = ref<HTMLDivElement>();
+
 const imageSrcs: Record<Api.GameKey, string> = {
     iii: GTAIIIBG,
     sa: GTASAArtwork,
     vc: ''
 }
 
+onMounted(() => {
+    if (loadingImageRef.value === undefined) {
+        console.error('Cannot find loading image element');
+        return;
+    }
+
+    const loadingImageEl = loadingImageRef.value
+
+    document.addEventListener('click', () => {
+        loadingImageEl.classList.remove('loading-image--active');
+    });
+})
+
 </script>
 
 <template>
-    <div class="loading-image loading-image--active" :class="`loading-image--${game}`" @click="(e) => {
-        (e.currentTarget as HTMLDivElement).classList.remove('loading-image--active');
-    }">
+    <div ref="loadingImageRef" class="loading-image loading-image--active" :class="`loading-image--${game}`">
         <img :src="imageSrcs[game]" alt="Game background">
         <span>Click to continue</span>
     </div>