Fixed characters not showing after logging in, added loading screen before showing characters, worked on GM tools

src/components/screens/Characters.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="character-select-screen">
     <div class="ui-wrapper">
-      <div class="characters-wrapper">
+      <div class="characters-wrapper" v-if="!isLoading">
         <div v-for="character in characters" :key="character.id" class="character" :class="{ active: selected_character == character.id }">
           <input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label :for="character.id">{{ character.name }}</label>
@@ -23,8 +23,13 @@
           </button>
         </div>
       </div>
+      <div v-else>
+        <div class="loading-spinner">
+          <img src="/assets/icons/loading-icon1.svg" />
+        </div>
+      </div>
 
-      <div class="button-wrapper">
+      <div class="button-wrapper" v-if="!isLoading">
         <button class="btn-cyan" :disabled="!selected_character" @click="select_character()">
           PLAY
           <img draggable="false" src="/assets/icons/arrow.svg">
@@ -55,18 +60,26 @@
 
 <script setup lang="ts">
 import { useSocketStore } from '@/stores/socket'
-import { ref } from 'vue'
+import { onBeforeMount, onMounted, ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import {type Character as CharacterT} from '@/types'
 
+const isLoading = ref(true)
 const characters = ref([])
-const socket = useSocketStore()
+const socket = useSocketStore();
 
 // Fetch characters
 socket.getConnection.on('character:list', (data: any) => {
   characters.value = data
 })
-socket.getConnection.emit('character:list')
+
+onMounted(() => {
+  // wait 1.5 sec
+  setTimeout(() => {
+    socket.getConnection.emit('character:list')
+    isLoading.value = false
+  }, 1000)
+});
 
 // Select character logics
 const selected_character = ref(null)
@@ -123,6 +136,14 @@ function create() {
       content: '';
     }
 
+    .loading-spinner img {
+      width: 5rem;
+      // css color
+      filter: invert(1);
+      // white
+      filter: invert(80%);
+    }
+
     .characters-wrapper {
       display: flex;
       justify-content: center;