add loading indicator

components/content/ArticleSystemDistributionPlot.vue

@@ -35,7 +35,7 @@ const { page } = useContent();
 // get the structures
 const msIndexName = ref<string>("refseqsanitized")
 const client = useMeiliSearchRef()
-
+const pending = ref<boolean>(false)
 
 const genomeCountThreshold = ref<boolean>(true)
 const genomeCountDomain = ref<[number | null, number | null]>([null, null])
@@ -187,6 +187,7 @@ watchEffect(() => {
 // =================================================
 async function fetchSystemHits() {
     try {
+        pending.value = true
         const data = await client.index(toValue(msIndexName)).search("", {
             facets: ["*"],
             filter: [`type = '${toValue(systemName)}'`],
@@ -196,6 +197,13 @@ async function fetchSystemHits() {
 
     } catch (error) {
         throw createError(`Cannot get hits on refseq for system: ${toValue(systemName)} `)
+    } finally {
+        setTimeout(() => {
+            console.log("Delayed for 1 second.");
+            pending.value = false
+        }, "3000");
+
+
     }
 }
 
@@ -223,10 +231,12 @@ async function fetchRefSeqTaxo() {
             The system was detected in {{ d3.format(",")(systemStatistics.speciesWithSystem) }} different species.
         </v-card-text>
 
+
+        <v-card flat :loading="pending">
             <v-row no-gutters>
                 <v-col>
-                <v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact" label="Select taxonomic rank"
-                    hide-details="auto" class="mx-2"></v-select>
+                    <v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact"
+                        label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select>
                 </v-col>
                 <!-- <v-col cols="12" md="4">
                 <v-select v-model="plotY" :items="axisOptions" density="compact" label="Y axis based on"
@@ -237,7 +247,6 @@ async function fetchRefSeqTaxo() {
                     hide-details="auto" class="mx-2"></v-select>
             </v-col> -->
             </v-row>
-
             <v-row class="d-flex" no-gutters>
                 <v-col cols="12" md="5">
                     <v-card flat>
@@ -271,7 +280,8 @@ async function fetchRefSeqTaxo() {
                                 </v-col>
                                 <v-col cols="3">
                                     <v-switch v-model="genomeCountThreshold" color="primary"
-                                    :label="genomeCountThreshold ? 'activated' : 'disabled'" hide-details></v-switch>
+                                        :label="genomeCountThreshold ? 'activated' : 'disabled'"
+                                        hide-details></v-switch>
                                 </v-col>
                             </v-row>
                         </v-card-text>
@@ -279,6 +289,11 @@ async function fetchRefSeqTaxo() {
                 </v-col>
 
             </v-row>
-        <PlotFigure ref="systemsDistributionPlot" :options="unref(distributionOptions)" defer></PlotFigure>
+            <PlotFigure v-if="!pending" ref="systemsDistributionPlot" :options="unref(distributionOptions)" defer>
+            </PlotFigure>
+            <v-card v-else>
+                {{ pending }}...
+            </v-card>
+        </v-card>
     </v-card>
 </template>
\ No newline at end of file