From f61ee183444899625c64ee9f5b80999c03e81fdf Mon Sep 17 00:00:00 2001
From: Damnae <damnaee@gmail.com>
Date: Wed, 3 Apr 2024 12:48:50 +0200
Subject: [PATCH] Add loading display to changes.

---
 src/components/LoadingArea.vue        | 16 +++++++++++
 src/views/pages/changes/Abilities.vue | 36 ++++++++++++++-----------
 src/views/pages/changes/Modifiers.vue | 36 ++++++++++++++-----------
 src/views/pages/changes/Statuses.vue  | 38 +++++++++++++++------------
 4 files changed, 77 insertions(+), 49 deletions(-)
 create mode 100644 src/components/LoadingArea.vue

diff --git a/src/components/LoadingArea.vue b/src/components/LoadingArea.vue
new file mode 100644
index 0000000..caff84b
--- /dev/null
+++ b/src/components/LoadingArea.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import LoadingNav from './LoadingNav.vue';
+
+  defineProps<{loading:boolean}>()
+</script>
+
+<template>
+  <span class="loader" v-if="loading">
+    <LoadingNav />
+  </span>
+  <slot v-else>
+  </slot>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/pages/changes/Abilities.vue b/src/views/pages/changes/Abilities.vue
index 24e8a9c..7380389 100644
--- a/src/views/pages/changes/Abilities.vue
+++ b/src/views/pages/changes/Abilities.vue
@@ -2,18 +2,20 @@
   import { computed, ref, watch, } from 'vue';
   import { TaskContext, TaskContextType, getTaskContext } from '@/sources/ability';
   import AbilityItem from './AbilityItem.vue';
+  import LoadingArea from '@/components/LoadingArea.vue';
 
   const props = defineProps<{fromCommitId:string, commitId:string, contextType:TaskContextType}>()
 
-  const taskContextFrom = ref<TaskContext>(await getTaskContext(props.fromCommitId, props.contextType))
-  const taskContext = ref<TaskContext>(await getTaskContext(props.commitId, props.contextType))
+  const loading = ref(true)
+  const taskContextFrom = ref<TaskContext>(await getTaskContext(props.fromCommitId, TaskContextType.Empty))
+  const taskContext = ref<TaskContext>(await getTaskContext(props.commitId, TaskContextType.Empty))
   watch(props, async () => 
   {
-    const from = await getTaskContext(props.fromCommitId, props.contextType)
-    const to = await getTaskContext(props.commitId, props.contextType)
-    taskContextFrom.value = from
-    taskContext.value = to
-  })
+    loading.value = true
+    taskContextFrom.value = await getTaskContext(props.fromCommitId, props.contextType)
+    taskContext.value = await getTaskContext(props.commitId, props.contextType)
+    loading.value = false
+  }, { immediate:true })
 
   const addedAbilities = computed(() => Object.values(taskContext.value.Abilities)
     .filter(v => taskContextFrom.value.Abilities[v.Name] == undefined)
@@ -29,15 +31,17 @@
 
   <h2>Abilities</h2>
 
-  <h3>{{ addedAbilities.length }} Added</h3>
-  <template v-for="ability in addedAbilities">
-    <AbilityItem :ability="ability" :isPrevious="false" />
-  </template>
-
-  <h3>{{ removedAbilities.length }} Removed</h3>
-  <template v-for="ability in removedAbilities">
-    <AbilityItem :ability="ability" :isPrevious="true" />
-  </template>
+  <LoadingArea :loading="loading">
+    <h3>{{ addedAbilities.length }} Added</h3>
+    <template v-for="ability in addedAbilities">
+      <AbilityItem :ability="ability" :isPrevious="false" />
+    </template>
+
+    <h3>{{ removedAbilities.length }} Removed</h3>
+    <template v-for="ability in removedAbilities">
+      <AbilityItem :ability="ability" :isPrevious="true" />
+    </template>
+  </LoadingArea>
 
 </template>
 
diff --git a/src/views/pages/changes/Modifiers.vue b/src/views/pages/changes/Modifiers.vue
index 851b0ec..cc7bdcb 100644
--- a/src/views/pages/changes/Modifiers.vue
+++ b/src/views/pages/changes/Modifiers.vue
@@ -2,18 +2,20 @@
   import { computed, ref, watch, } from 'vue';
   import { TaskContext, TaskContextType, getTaskContext } from '@/sources/ability';
   import ModifierItem from './ModifierItem.vue';
+  import LoadingArea from '@/components/LoadingArea.vue';
 
   const props = defineProps<{fromCommitId:string, commitId:string, contextType:TaskContextType}>()
 
-  const taskContextFrom = ref<TaskContext>(await getTaskContext(props.fromCommitId, props.contextType))
-  const taskContext = ref<TaskContext>(await getTaskContext(props.commitId, props.contextType))
+  const loading = ref(true)
+  const taskContextFrom = ref<TaskContext>(await getTaskContext(props.fromCommitId, TaskContextType.Empty))
+  const taskContext = ref<TaskContext>(await getTaskContext(props.commitId, TaskContextType.Empty))
   watch(props, async () => 
   {
-    const from = await getTaskContext(props.fromCommitId, props.contextType)
-    const to = await getTaskContext(props.commitId, props.contextType)
-    taskContextFrom.value = from
-    taskContext.value = to
-  })
+    loading.value = true
+    taskContextFrom.value = await getTaskContext(props.fromCommitId, props.contextType)
+    taskContext.value = await getTaskContext(props.commitId, props.contextType)
+    loading.value = false
+  }, { immediate:true })
 
   const addedModifiers = computed(() => Object.values(taskContext.value.Modifiers)
     .filter(v => taskContextFrom.value.Modifiers[v.Name] == undefined)
@@ -29,15 +31,17 @@
 
   <h2>Modifiers</h2>
 
-  <h3>{{ addedModifiers.length }} Added</h3>
-  <template v-for="modifier in addedModifiers">
-    <ModifierItem :modifier="modifier" :isPrevious="false" />
-  </template>
-
-  <h3>{{ removedModifiers.length }} Removed</h3>
-  <template v-for="modifier in removedModifiers">
-    <ModifierItem :modifier="modifier" :isPrevious="true" />
-  </template>
+  <LoadingArea :loading="loading">
+    <h3>{{ addedModifiers.length }} Added</h3>
+    <template v-for="modifier in addedModifiers">
+      <ModifierItem :modifier="modifier" :isPrevious="false" />
+    </template>
+
+    <h3>{{ removedModifiers.length }} Removed</h3>
+    <template v-for="modifier in removedModifiers">
+      <ModifierItem :modifier="modifier" :isPrevious="true" />
+    </template>
+  </LoadingArea>
 
 </template>
 
diff --git a/src/views/pages/changes/Statuses.vue b/src/views/pages/changes/Statuses.vue
index 2dbd4d1..bd41a35 100644
--- a/src/views/pages/changes/Statuses.vue
+++ b/src/views/pages/changes/Statuses.vue
@@ -2,18 +2,20 @@
   import { computed, ref, watch, } from 'vue';
   import { StatusConfig, getStatuses } from '@/sources/status';
   import StatusItem from './StatusItem.vue';
+  import LoadingArea from '@/components/LoadingArea.vue';
 
   const props = defineProps<{fromCommitId:string, commitId:string}>()
-  
-  const statusesFrom = ref<StatusConfig>(await getStatuses(props.fromCommitId))
-  const statuses = ref<StatusConfig>(await getStatuses(props.commitId))
+
+  const loading = ref(true)
+  const statusesFrom = ref<StatusConfig>({})
+  const statuses = ref<StatusConfig>({})
   watch(props, async () => 
   {
-    const from = await getStatuses(props.fromCommitId)
-    const to = await getStatuses(props.commitId)
-    statusesFrom.value = from
-    statuses.value = to
-  })
+    loading.value = true
+    statusesFrom.value = await getStatuses(props.fromCommitId)
+    statuses.value = await getStatuses(props.commitId)
+    loading.value = false
+  }, { immediate:true })
 
   const addedStatuses = computed(() => Object.values(statuses.value)
     .filter(v => statusesFrom.value[v.StatusID] == undefined)
@@ -29,15 +31,17 @@
 
   <h2>Statuses</h2>
 
-  <h3>{{ addedStatuses.length }} Added</h3>
-  <template v-for="status in addedStatuses">
-    <StatusItem :status="status" :isPrevious="false" />
-  </template>
-
-  <h3>{{ removedStatuses.length }} Removed</h3>
-  <template v-for="status in removedStatuses">
-    <StatusItem :status="status" :isPrevious="true" />
-  </template>
+  <LoadingArea :loading="loading">
+    <h3>{{ addedStatuses.length }} Added</h3>
+    <template v-for="status in addedStatuses">
+      <StatusItem :status="status" :isPrevious="false" />
+    </template>
+
+    <h3>{{ removedStatuses.length }} Removed</h3>
+    <template v-for="status in removedStatuses">
+      <StatusItem :status="status" :isPrevious="true" />
+    </template>
+  </LoadingArea>
 
 </template>