From b3875a03220a074acdc51016dd3396c85e1d6fb0 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Fri, 2 Aug 2024 11:50:47 -0400
Subject: [PATCH] simulate loading from API

---
 .../PanelCollectionObjects.vue                | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
index edf0e2b..22e54f5 100644
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
@@ -2,9 +2,9 @@
   <VCard>
     <ClientOnly>
       <VSpinner
-        v-if="isLoading"
-        logo-class="w-8 h-8"
-        legend=""
+          v-if="isLoading"
+          logo-class="w-8 h-8"
+          legend=""
       />
     </ClientOnly>
     <VCardHeader class="flex justify-between">
@@ -12,14 +12,40 @@
       <PanelDropdown panel-key="panel:collection-objects" />
     </VCardHeader>
     <VCardContent class="text-sm">
-      <p>Placeholder.</p>
+      <p v-html="content"/>
     </VCardContent>
   </VCard>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import PanelDropdown from '../PanelDropdown.vue'
 
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const props = defineProps({
+  otuId: {
+    type: [String, Number],
+    required: true
+  }
+})
+
+const content = ref("Loading...")
 const isLoading = ref(false)
+
+watch(
+    () => props.otuId,
+    async () => {
+      if (!props.otuId) {
+        content.value = 'No OTU specified.'
+        return
+      }
+
+      isLoading.value = true
+      await sleep(2000)
+      content.value = `Collection objects content for ${props.otuId}.`
+      isLoading.value = false
+    },
+    {immediate: true}
+)
 </script>