add progress bar

src/components/LoadingBar.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="loadingComponent">
+        <progress class="loadingBar" max="1" :value="value"></progress>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    value: Number
+  }
+})
+</script>
+
+  <!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.loadingComponent {
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(100% - 3em);
+}
+</style>

src/components/PlayerChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="playerChart" ref="container">
-    <!-- <Scatter :data="chart" :options="chartOptions" /> -->
-    <Scatter :data="chart" :options="chartOptions" />
+    <LoadingBar v-if="progress!==1" :value="progress"></LoadingBar>
+    <Scatter :data="chart" :options="chartOptions" v-if="progress===1" />
   </div>
 </template>
 
@@ -26,6 +26,8 @@ import { defineComponent, PropType, Ref, toRaw, triggerRef, unref } from 'vue'
 import { ChartEvent } from 'chart.js/dist/core/core.plugins'
 import { _DeepPartialObject } from 'chart.js/dist/types/utils'
 
+import LoadingBar from './LoadingBar.vue'
+
 ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend, annotationPlugin, dataLabel)
 
 export default defineComponent({
@@ -43,12 +45,19 @@ export default defineComponent({
   },
   emits: ['highlightPlayer'],
   components: {
-    Scatter
+    Scatter, LoadingBar
   },
   mounted () {
     this.refreshColors++
   },
   computed: {
+    progress () {
+      if (this.filters) {
+        const { player: _, ...withoutPlayer } = this.filters
+        return this.store.getPlayerList(withoutPlayer)?.value.progress
+      }
+      return 0
+    },
     playerList (): (Player & {id:string})[] {
       const data = this.store.getPlayerList(this.filters || {})?.value.data
       if (!data) return Object.entries(this.store.fetchPlayers(this.filters || {}).value.data).map(e => ({ id: e[0], ...toRaw(e[1].value) }))

src/components/PlayerList.vue

@@ -12,7 +12,8 @@
       <span v-on:click="updateSort('avg_distance')"
         :class="sortingData.argument == 'avg_distance' ? 'selected' : ''">Average distance</span>
     </div>
-    <VirtualList :list="playerList" :row-height="32" v-slot="slotProps" :highlighted="playerHighlighted">
+    <LoadingBar v-if="progress!==1" :value="progress"></LoadingBar>
+    <VirtualList :list="playerList" :row-height="32" v-slot="slotProps" :highlighted="playerHighlighted" v-if="progress===1">
       <div :class="'playerRow ' + (slotProps.data.id === playerHighlighted ? 'selected ' : '') + ((slotProps.index + 1)%2 ? 'odd ':'uneven ')" v-on:click="$emit('highlightPlayer', slotProps.data.id)">
         <div><span>{{ slotProps.index+1 }}</span></div>
         <div><span>{{ slotProps.data.value.username }}</span></div>
@@ -30,9 +31,10 @@
 import { defineComponent, PropType, Ref } from 'vue'
 import { useKillStore, Player, Filters } from '@/stores/kill'
 import VirtualList from './List/VirtualList.vue'
+import LoadingBar from './LoadingBar.vue'
 
 export default defineComponent({
-  components: { VirtualList },
+  components: { VirtualList, LoadingBar },
   props: {
     filters: { type: Object as PropType<Filters>, default: () => ({}) },
     playerHighlighted: String
@@ -45,6 +47,10 @@ export default defineComponent({
     }
   },
   computed: {
+    progress () {
+      const { player: _, ...withoutPlayer } = this.filters
+      return this.store.getPlayerList(withoutPlayer)?.value.progress
+    },
     players (): { [key: string]: Ref<Player> } {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { player: _, ...withoutPlayer } = this.filters
@@ -61,7 +67,6 @@ export default defineComponent({
         return player
       }) as (Ref<Player> & { id: string })[]
 
-      const date = new Date()
       if (this.sortingData.argument === 'username') {
         const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' })
         players.sort((a, b) => {

src/components/WeaponChart.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="weaponChart" ref="container">
-    <Doughnut :data="chart" :options="chartOptions" />
+    <LoadingBar v-if="progress !== 1" :value="progress"></LoadingBar>
+    <Doughnut :data="chart" :options="chartOptions" v-if="progress === 1"/>
   </div>
 </template>
 
@@ -12,6 +13,8 @@ import { Doughnut } from 'vue-chartjs'
 import { defineComponent, PropType, Ref } from 'vue'
 import weapons from '../stores/weapons.json'
 
+import LoadingBar from './LoadingBar.vue'
+
 ChartJS.register(ArcElement, Tooltip, Legend, dataLabel)
 
 export default defineComponent({
@@ -22,7 +25,7 @@ export default defineComponent({
   },
   emits: ['highlightPlayer'],
   components: {
-    Doughnut
+    Doughnut, LoadingBar
   },
   mounted () {
     this.refreshColors++
@@ -34,6 +37,10 @@ export default defineComponent({
     }
   },
   computed: {
+    progress () {
+      const { weapon: _, ...withoutWeapon } = this.filters || {}
+      return this.store.getWeaponList(withoutWeapon)?.value.progress
+    },
     colors () {
       // eslint-disable-next-line no-unused-expressions
       this.refreshColors