Merge pull request #3074 from CVEProject/jd-3024-loading

Resolves #3024 Added loading spinner and text to container titles

Author: ann-linh-mitre

src/views/CVERecord/PublishedRecord.vue

@@ -60,15 +60,21 @@
             <div id="cve-cna-cve-program-containers">
               <h2 class="title">Required CVE Record Information</h2>
               <AdpVulnerabilityEnrichment v-if="Object.keys(cnaContainer).length > 0" role="cna" :selectedCnaData="cveFieldList"
-                :containerObject="cnaContainer" :orgId="`cna-${cnaContainer.providerMetadata.orgId}`" :anchorId="cnaContainer.onPageMenu.anchorId"
-              >
-                <h3 class="mb-1 has-text-white cve-capitalize-first-letter">{{ cnaContainer.onPageMenu.label }}</h3>
+                :containerObject="cnaContainer" :orgId="`cna-${cnaContainer.providerMetadata.orgId}`" :anchorId="cnaContainer.onPageMenu.anchorId">
+                <h3 class="mb-1 has-text-white cve-capitalize-first-letter">
+                  <span v-if="!isLoading">{{ cnaContainer.onPageMenu.label }} </span>
+                  <span v-else>
+                    <span class="icon">
+                      <span class="loader is-loading"/>  
+                    </span>  
+                    <span class="ml-2">Loading...</span>
+                  </span>
+                </h3>
               </AdpVulnerabilityEnrichment>
               <!-- <AdpVulnerabilityEnrichment v-if="!useCveRecordLookupStore.hasHistoricalReferences" role="cna" :containerObject="cnaContainer"></AdpVulnerabilityEnrichment> -->
               <AdpVulnerabilityEnrichment v-if="Object.keys(cveProgramContainer).length > 0" role='cveProgram' 
                 :selectedCnaData="{}" :containerObject="cveProgramContainer" :orgId="`cve-program-${cveProgramContainer.providerMetadata.orgId}`"
-                :anchorId="cveProgramContainer.onPageMenu.anchorId"
-              >
+                :anchorId="cveProgramContainer.onPageMenu.anchorId">
                 <h3 class="mb-1 has-text-white cve-capitalize-first-letter">{{ cveProgramContainer.onPageMenu.label }}</h3>
               </AdpVulnerabilityEnrichment>
             </div>
@@ -81,7 +87,15 @@
                 <AdpVulnerabilityEnrichment v-if="adpContainer.providerMetadata.shortName === 'CISA-ADP'" role="adp" :selectedCnaData="{}" 
                   :containerObject="adpContainer" :orgId="`adp-${adpContainer.providerMetadata.orgId}`" :anchorId="adpContainer.onPageMenu.anchorId"
                 >
-                  <h3 class="mb-1 has-text-white cve-capitalize-first-letter">{{ adpContainer.onPageMenu.label }}</h3>
+                  <h3 class="mb-1 has-text-white cve-capitalize-first-letter">
+                    <span v-if="!isLoading">{{ adpContainer.onPageMenu.label }}</span>
+                    <span v-else>
+                      <span class="icon">
+                        <span class="loader is-loading"/>   
+                      </span>  
+                      <span class="ml-2">Loading...</span>
+                    </span>
+                  </h3>
                 </AdpVulnerabilityEnrichment>
                 <!-- <div v-for="(adpContainer) in cveFieldList.productsStatus.adp" :key="adpContainer.key"
                   class="mt-5"
@@ -117,6 +131,7 @@ export default {
   },
   data() {
     return {
+      isLoading: false,
       isMessageExpanded: false,
       isHelpTestShown: false,
       cveRecordFields: ['ID', 'CNA', 'Credits', 'Description', 'References', 'State', 'Tags', 'Title', 'VendorsProductsVersions',
@@ -577,9 +592,11 @@ export default {
     },
   },
   async beforeMount() {
+    this.isLoading = true
     await this.getOrgIdAndLongNameMap().finally(() =>{
       this.initializeFields();
       this.setupContainersAccordionStateOnPageMenu();
+      this.isLoading = false;
     });
   },
   created () {