Add spinner for loading iframe content

Author: naglepuff

web/src/components/DataObjectTable.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  computed, defineComponent, PropType, reactive, ref, Ref,
+  computed, defineComponent, PropType, reactive, ref, Ref, watch,
 } from '@vue/composition-api';
 import { flattenDeep } from 'lodash';
 
@@ -93,6 +93,7 @@ export default defineComponent({
     const selectedHtmlDataObject: Ref<any | null> = ref(null);
     const dataModal = ref(false);
     const iframeDataSource = ref('');
+    const iframeLoading = ref(false);
     function hasHtmlData(fileType: string) {
       return [
         'Kraken2 Krona Plot',
@@ -101,12 +102,19 @@ export default defineComponent({
       ].includes(fileType);
     }
     async function openHtmlDataModal(item: any) {
+      iframeLoading.value = true;
+      dataModal.value = true;
       iframeDataSource.value = await api.getDataObjectUrl(item.id);
       selectedHtmlDataObject.value = item;
-      dataModal.value = true;
     }
-    function handleIframeScroll(e) {
-      console.log(e);
+    watch(dataModal, () => {
+      if (!dataModal.value) {
+        selectedHtmlDataObject.value = null;
+        iframeDataSource.value = '';
+      }
+    });
+    function onIframeLoaded() {
+      iframeLoading.value = false;
     }
 
     const termsDialog = reactive({
@@ -186,11 +194,12 @@ export default defineComponent({
 
     return {
       dataModal,
+      iframeLoading,
       hasHtmlData,
       openHtmlDataModal,
       selectedHtmlDataObject,
       iframeDataSource,
-      handleIframeScroll,
+      onIframeLoaded,
       onAcceptTerms,
       handleDownload,
       descriptionMap,
@@ -221,20 +230,36 @@ export default defineComponent({
       v-model="dataModal"
       scroll-strategy="block"
       width="80vw"
+      scrollable
     >
       <v-card
         class="d-flex flex-column"
         width="100%"
         height="80vh"
       >
         <v-card-text class="d-flex flex-grow-1">
-          <span v-if="!iframeDataSource">Loading data</span>
+          <span
+            v-if="iframeLoading"
+            class="d-flex align-center justify-center flex-grow-1"
+          >
+            <v-progress-circular
+              color="primary"
+              indeterminate
+            />
+            Loading...
+          </span>
           <iframe
-            v-else
-            title="iframe title"
+            :title="selectedHtmlDataObject.description || 'Data object HTML content'"
             :src="iframeDataSource"
-            :style="{border: 'none'}"
-            width="100%"
+            :style="{border: 'none' }"
+            :width="iframeLoading ? '0%' : '100%'"
+            class="pa-4"
+            loading="lazy"
+            @load="onIframeLoaded"
+          />
+          <div
+            class="iframe-blocker"
+            :style="{ position: 'absolute', height: '100%', width: '100%'}"
           />
         </v-card-text>
         <v-card-actions class="flex-row">