refactor: loading spinner configurable tag

packages/portal/src/components/download/DownloadButton.vue

@@ -13,6 +13,7 @@
     {{ $t('actions.download') }}
     <LoadingSpinner
       v-show="validating"
+      tag="span"
       class="ml-2"
     />
   </b-button>

packages/portal/src/components/entity/EntityTable.vue

@@ -39,7 +39,9 @@
     >
       <template #table-busy>
         <div class="text-center my-2">
-          <LoadingSpinner />
+          <LoadingSpinner
+            tag="span"
+          />
           {{ $t('loading') }}
         </div>
       </template>

packages/portal/src/components/generic/LoadingSpinner.vue

@@ -1,9 +1,9 @@
 <template>
-  <!-- outer span needed to permit parent component to set its own v-show
-       without overwriting the local one -->
-  <span>
+  <component
+    :is="tag"
+    v-if="visible"
+  >
     <span
-      v-show="visible"
       role="status"
       data-qa="loading spinner"
     >
@@ -16,14 +16,18 @@
         aria-hidden="true"
       />
     </span>
-  </span>
+  </component>
 </template>
 
 <script>
   export default {
     name: 'LoadingSpinner',
 
     props: {
+      tag: {
+        type: String,
+        default: 'div'
+      },
       /**
        * Delay to wait before showing the spinner, in ms
        */

packages/portal/src/components/item/ItemMediaPresentation.vue

@@ -20,16 +20,11 @@
             'fullscreen-include-sidebar': fullscreen && sidebarHasContent
           }"
         >
-          <b-container
+          <LoadingSpinner
             v-if="$fetchState.pending"
-            class="h-100 d-flex align-items-center justify-content-center"
-            data-qa="loading spinner container"
-          >
-            <LoadingSpinner
-              class="text-white"
-              size="lg"
-            />
-          </b-container>
+            class="text-white h-100 d-flex align-items-center justify-content-center"
+            size="lg"
+          />
           <template v-else>
             <template v-if="sidebarHasContent">
               <ItemMediaSidebar

packages/portal/src/components/media/MediaAnnotationList.vue

@@ -1,15 +1,9 @@
 <template>
   <div>
-    <b-container
+    <LoadingSpinner
       v-if="$fetchState.pending"
-      data-qa="loading spinner container"
-    >
-      <b-row class="flex-md-row py-4 text-center">
-        <b-col cols="12">
-          <LoadingSpinner />
-        </b-col>
-      </b-row>
-    </b-container>
+      class="flex-md-row py-4 text-center"
+    />
     <ol
       v-else-if="annotationList.length"
       class="media-viewer-annotation-list list-group"

packages/portal/src/components/media/MediaImageViewer.vue

@@ -7,16 +7,11 @@
     <MediaImageViewerKeyboardToggle
       id="media-image-viewer-keyboard-toggle"
     />
-    <b-container
+    <LoadingSpinner
       v-if="imageLoading"
-      class="loading-spinner position-absolute h-100 d-flex align-items-center justify-content-center"
-      data-qa="loading spinner container"
-    >
-      <LoadingSpinner
-        class="text-white"
-        size="lg"
-      />
-    </b-container>
+      class="loading-spinner position-absolute text-white h-100 d-flex align-items-center justify-content-center"
+      size="lg"
+    />
     <slot />
   </div>
 </template>

packages/portal/src/components/search/SearchFacetDropdown.vue

@@ -134,7 +134,9 @@
               v-if="$fetchState.pending"
               class="text-center"
             >
-              <LoadingSpinner />
+              <LoadingSpinner
+                tag="span"
+              />
             </b-dropdown-text>
             <b-dropdown-text v-else-if="fetched && availableSortedDisplayableOptions.length === 0">
               {{ $t('sideFilters.noOptions') }}

packages/portal/src/components/search/SearchInterface.vue

@@ -52,16 +52,11 @@
               <b-col
                 cols="12"
               >
-                <b-row
+                <LoadingSpinner
                   v-show="$fetchState.pending"
                   class="flex-md-row py-4 text-center"
-                >
-                  <b-col cols="12">
-                    <LoadingSpinner
-                      :status-message="$t('loadingResults')"
-                    />
-                  </b-col>
-                </b-row>
+                  :status-message="$t('loadingResults')"
+                />
                 <template
                   v-if="!$fetchState.pending"
                 >

packages/portal/src/components/stories/StoriesInterface.vue

@@ -24,17 +24,10 @@
         {{ $t('storiesPage.storiesHaveLoaded', [total]) }}
       </output>
     </div>
-    <b-container
+    <LoadingSpinner
       v-if="$fetchState.pending"
-      data-qa="stories loading spinner container"
-      class="position-absolute"
-    >
-      <b-row class="flex-md-row py-4 text-center">
-        <b-col cols="12">
-          <LoadingSpinner />
-        </b-col>
-      </b-row>
-    </b-container>
+      class="container position-absolute flex-md-row py-4 text-center"
+    />
     <transition
       v-else
       appear

packages/portal/src/components/user/UserSets.vue

@@ -2,12 +2,10 @@
   <b-container>
     <b-row class="flex-md-row">
       <b-col cols="12">
-        <div
+        <LoadingSpinner
           v-if="$fetchState.pending"
           class="text-center pb-4"
-        >
-          <LoadingSpinner />
-        </div>
+        />
         <AlertMessage
           v-else-if="$fetchState.error"
           :error="$fetchState.error.message"

packages/portal/src/pages/account/index.vue

@@ -75,12 +75,10 @@
             </b-row>
           </b-container>
           <client-only>
-            <div
+            <LoadingSpinner
               v-if="$fetchState.pending"
               class="text-center pb-4"
-            >
-              <LoadingSpinner />
-            </div>
+            />
             <AlertMessage
               v-else-if="$fetchState.error"
               :error="$fetchState.error.message"

packages/portal/src/pages/feature-ideas/index.vue

@@ -1,15 +1,9 @@
 <template>
   <div class="page white-page text-page xxl-page">
-    <b-container
+    <LoadingSpinner
       v-if="$fetchState.pending"
-      data-qa="loading spinner container"
-    >
-      <b-row class="flex-md-row py-4 text-center">
-        <b-col cols="12">
-          <LoadingSpinner />
-        </b-col>
-      </b-row>
-    </b-container>
+      class="flex-md-row py-4 text-center"
+    />
     <b-container
       v-else-if="$fetchState.error"
       data-qa="alert message container"

packages/portal/src/pages/galleries/_.vue

@@ -2,16 +2,10 @@
   <div
     :class="$fetchState.error && 'white-page'"
   >
-    <b-container
+    <LoadingSpinner
       v-if="$fetchState.pending"
-      data-qa="loading spinner container"
-    >
-      <b-row class="flex-md-row py-4 text-center">
-        <b-col cols="12">
-          <LoadingSpinner />
-        </b-col>
-      </b-row>
-    </b-container>
+      class="flex-md-row py-4 text-center"
+    />
     <ErrorMessage
       v-else-if="$fetchState.error"
       data-qa="error message container"

packages/portal/src/pages/galleries/index.vue

@@ -1,14 +1,8 @@
 <template>
-  <b-container
+  <LoadingSpinner
     v-if="$fetchState.pending"
-    data-qa="loading spinner container"
-  >
-    <b-row class="flex-md-row py-4 text-center">
-      <b-col cols="12">
-        <LoadingSpinner />
-      </b-col>
-    </b-row>
-  </b-container>
+    class="flex-md-row py-4 text-center"
+  />
   <b-container
     v-else-if="$fetchState.error"
     data-qa="alert message container"

packages/portal/src/pages/index.vue

@@ -1,15 +1,9 @@
 <template>
   <div :class="$fetchState.error && 'white-page'">
-    <b-container
+    <LoadingSpinner
       v-if="$fetchState.pending"
-      data-qa="loading spinner container"
-    >
-      <b-row class="flex-md-row py-4 text-center">
-        <b-col cols="12">
-          <LoadingSpinner />
-        </b-col>
-      </b-row>
-    </b-container>
+      class="flex-md-row py-4 text-center"
+    />
     <ErrorMessage
       v-else-if="$fetchState.error"
       data-qa="error message container"

packages/portal/src/pages/item/_.vue

@@ -4,16 +4,10 @@
     class="page white-page"
     :class="$fetchState.error && 'pt-0'"
   >
-    <b-container
+    <LoadingSpinner
       v-if="$fetchState.pending"
-      data-qa="loading spinner container"
-    >
-      <b-row class="flex-md-row py-4 text-center">
-        <b-col cols="12">
-          <LoadingSpinner />
-        </b-col>
-      </b-row>
-    </b-container>
+      class="flex-md-row py-4 text-center"
+    />
     <ErrorMessage
       v-else-if="$fetchState.error"
       data-qa="error message container"

packages/portal/src/pages/stories/_.vue

@@ -3,17 +3,10 @@
     data-qa="story page"
     class="text-page white-page "
   >
-    <b-container
+    <LoadingSpinner
       v-if="$fetchState.pending"
-      class="pt-5"
-      data-qa="loading spinner container"
-    >
-      <b-row class="flex-md-row py-4 text-center">
-        <b-col cols="12">
-          <LoadingSpinner />
-        </b-col>
-      </b-row>
-    </b-container>
+      class="pt-5 flex-md-row py-4 text-center"
+    />
     <ErrorMessage
       v-else-if="$fetchState.error"
       data-qa="error message container"

packages/portal/src/pages/stories/index.vue

@@ -1,15 +1,9 @@
 <template>
   <div class="page white-page xxl-page">
-    <b-container
+    <LoadingSpinner
       v-if="$fetchState.pending"
-      data-qa="loading spinner container"
-    >
-      <b-row class="flex-md-row py-4 text-center">
-        <b-col cols="12">
-          <LoadingSpinner />
-        </b-col>
-      </b-row>
-    </b-container>
+      class="flex-md-row py-4 text-center"
+    />
     <b-container
       v-else-if="$fetchState.error"
       data-qa="alert message container"

packages/portal/src/pages/themes/_.vue

@@ -3,16 +3,10 @@
     data-qa="theme page"
     class="page white-page xxl-page"
   >
-    <b-container
+    <LoadingSpinner
       v-if="$fetchState.pending"
-      data-qa="loading spinner container"
-    >
-      <b-row class="flex-md-row py-4 text-center">
-        <b-col cols="12">
-          <LoadingSpinner />
-        </b-col>
-      </b-row>
-    </b-container>
+      class="flex-md-row py-4 text-center"
+    />
     <ErrorMessage
       v-else-if="$fetchState.error"
       data-qa="error message container"

packages/portal/tests/unit/components/generic/LoadingSpinner.spec.js

@@ -16,31 +16,32 @@ describe('components/generic/LoadingSpinner', () => {
     jest.useRealTimers();
   });
 
-  it('uses the fallback message when none has been passed', () => {
+  it('uses the fallback message when none has been passed', async() => {
     const wrapper = factory();
+    jest.runAllTimers();
+    await wrapper.vm.$nextTick();
 
     const spinner =  wrapper.find('[data-qa="loading spinner"]');
 
     expect(spinner.text()).toBe('loading');
   });
 
   describe('delay', () => {
-    it('prevents the spinner showing immediately', async() => {
-      const wrapper = factory({ propsData: { delay: 500 } });
+    it('prevents the spinner rendering immediately', async() => {
+      const wrapper = factory();
 
       const spinner = wrapper.find('[data-qa="loading spinner"]');
-      await wrapper.vm.$nextTick();
 
-      expect(spinner.isVisible()).toBe(false);
+      expect(spinner.exists()).toBe(false);
     });
 
     it('shows the spinner after delay has elapsed', async() => {
-      const wrapper = factory({ propsData: { delay: 500 } });
-
-      const spinner = wrapper.find('[data-qa="loading spinner"]');
+      const wrapper = factory();
       jest.runAllTimers();
       await wrapper.vm.$nextTick();
 
+      const spinner = wrapper.find('[data-qa="loading spinner"]');
+
       expect(spinner.isVisible()).toBe(true);
     });
   });