Add loading display to changes.

Damnae · Apr 3, 2024 · f61ee18 · f61ee18
1 parent 7948c1d
commit f61ee18
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 49 deletions.
diff --git a/src/components/LoadingArea.vue 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>
diff --git 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
@@ -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
@@ -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>