add spinner

Author: xsalonx

lib/public/views/Runs/Overview/exportTriggerAndModal.js

@@ -11,6 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
+import spinner from '../../../components/common/spinner.js';
 import { h } from '/js/src/index.js';
 
 /**
@@ -31,12 +32,14 @@ const exportForm = (exportModel, modalHandler) => {
 
     const fieldsSelected = selectedFields.length > 0;
 
-    const fieldsSelectionHeader1 = h('label.form-check-label.f4.mt1', { for: '' }, 'Fields');
-    const fieldsSelectionHeader2 = h(
-        'label.form-check-label.f6',
-        { for: '' },
-        'Select which fields to be exported. (CTRL + click for multiple selection)',
-    );
+    const fieldsSelectionLabels = [
+        h('label.form-check-label.f4.mt1', { for: 'fields' }, 'Fields'),
+        h(
+            'label.form-check-label.f6',
+            { for: 'fields' },
+            'Select which fields to be exported. (CTRL + click for multiple selection)',
+        ),
+    ];
 
     const fieldsSelection = h('select#fields.form-control', {
         style: 'min-height: 20rem;',
@@ -51,8 +54,10 @@ const exportForm = (exportModel, modalHandler) => {
             }, name)),
     ]);
 
-    const exportTypeSelectionHeader1 = h('label.form-check-label.f4.mt1', { for: '' }, 'Export type');
-    const exportTypeSelectionHeader2 = h('label.form-check-label.f6', { for: '' }, 'Select output format');
+    const exportTypeSelectionHeader = [
+        h('.form-check-label.f4.mt1', 'Export type'),
+        h('.form-check-label.f6', 'Select output format'),
+    ];
 
     const exportTypeSelect = h('.flex-row.g3', exportTypes.map((exportType) => {
         const id = `runs-export-type-${exportType}`;
@@ -83,18 +88,19 @@ const exportForm = (exportModel, modalHandler) => {
 
     const dataLength = exportModel.items.match({ Success: ({ length } = {}) => length, Other: () => null });
     const { totalExistingItemsCount } = exportModel;
+
+    const truncatedDataInfo = dataLength && dataLength < totalExistingItemsCount
+        ? h(
+            '#truncated-export-warning.warning',
+            `The data export is limited to ${dataLength} entries, only the last data will be exported`,
+        )
+        : null;
+
     return [
-        dataLength && dataLength < totalExistingItemsCount
-            ? h(
-                '#truncated-export-warning.warning',
-                `The data export is limited to ${dataLength} entries, only the last data will be exported`,
-            )
-            : null,
-        fieldsSelectionHeader1,
-        fieldsSelectionHeader2,
+        dataAvailable ? truncatedDataInfo : spinner({ size: 2, absolute: false }),
+        fieldsSelectionLabels,
         fieldsSelection,
-        exportTypeSelectionHeader1,
-        exportTypeSelectionHeader2,
+        exportTypeSelectionHeader,
         exportTypeSelect,
         exportBtn,
     ];