From 4ed43605b3633be18431e1d0b9a6af85df6f32e0 Mon Sep 17 00:00:00 2001
From: Tai Sakuma <tai.sakuma@gmail.com>
Date: Thu, 8 Aug 2024 11:28:38 -0400
Subject: [PATCH] Display initial and reload errors separately

---
 src/utils/config/ProvideConfig.vue | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/utils/config/ProvideConfig.vue b/src/utils/config/ProvideConfig.vue
index b85663a..c488640 100644
--- a/src/utils/config/ProvideConfig.vue
+++ b/src/utils/config/ProvideConfig.vue
@@ -1,8 +1,15 @@
 <template>
-  <template v-if="error">
+  <template v-if="reloadError">
     <div>
       <VAlert variant="tonal" type="error" class="ma-2">
-        {{ error }}
+        {{ reloadError }}
+      </VAlert>
+    </div>
+  </template>
+  <template v-if="initialError">
+    <div>
+      <VAlert variant="tonal" type="error" class="ma-2">
+        {{ initialError }}
       </VAlert>
     </div>
   </template>
@@ -15,10 +22,20 @@
 /**
  * Load config asynchronously and provide it to the child components.
  */
-import { until } from "@vueuse/core";
+import { ref, watchEffect } from "vue";
 import { useLoadConfig } from "@/utils/config";
 import { useProvideConfig } from "@/utils/config";
-const { error, config } = await useLoadConfig();
-await until(config).not.toBeNull();
-useProvideConfig(config);
+const initialError = ref<any>();
+const reloadError = ref<Error | undefined>();
+try {
+  const { error, config } = await useLoadConfig();
+  useProvideConfig(config);
+  watchEffect(() => {
+    if (error.value) console.error(error.value);
+    reloadError.value = error.value;
+  });
+} catch (e: unknown) {
+  console.error(e);
+  initialError.value = e;
+}
 </script>