From 22a94e7642c4e310cd03cb239cbc19792ddaf9c0 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 6 Mar 2024 16:25:03 -0300
Subject: [PATCH] video: Add loading state to video table

This way users don't receive a "no videos available" warn when it's in fact loading the database.
---
 src/views/ConfigurationVideoView.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/views/ConfigurationVideoView.vue b/src/views/ConfigurationVideoView.vue
index 61c7803f3..7eaf717ee 100644
--- a/src/views/ConfigurationVideoView.vue
+++ b/src/views/ConfigurationVideoView.vue
@@ -60,7 +60,7 @@
         </p>
       </div>
 
-      <div v-if="availableVideosAndLogs.isEmpty()" class="max-w-[50%] bg-slate-100 rounded-md p-6 border">
+      <div v-if="availableVideosAndLogs?.isEmpty()" class="max-w-[50%] bg-slate-100 rounded-md p-6 border">
         <p class="mb-4 text-2xl font-semibold text-center text-slate-500">No videos available.</p>
         <p class="text-center text-slate-400">
           Use the MiniVideoRecorder widget to record some videos and them come back here to download or discard those.
@@ -76,6 +76,8 @@
         item-value="filename"
         density="compact"
         show-select
+        loading-text="Loading... Please wait"
+        :loading="availableVideosAndLogs === undefined"
         class="max-w-[90%] bg-slate-100/30 rounded-lg p-6 border"
       >
         <template #item.size="{ value }">
@@ -151,7 +153,7 @@ interface VideoStorageFile {
   size: number
 }
 /* eslint-enable jsdoc/require-jsdoc  */
-const availableVideosAndLogs = ref<VideoStorageFile[]>([])
+const availableVideosAndLogs = ref<VideoStorageFile[] | undefined>()
 const temporaryDbSize = ref(0)
 const selectedFilesNames = ref<string[]>([])
 
@@ -162,6 +164,7 @@ onMounted(async () => {
 
 // Fetch available videos and telemetry logs from the storage
 const fetchVideoAndLogsData = async (): Promise<void> => {
+  availableVideosAndLogs.value = undefined
   const availableData: VideoStorageFile[] = []
   await videoStore.videoStoringDB.iterate((_, fileName) => {
     availableData.push({