Add loading spinners to Vue components

[UnniKohonen]

Reasons for creating this PR

Many Vue components do not currently have loading spinners, this PR adds them.

Link to relevant issue(s), if any

• Part of Epic: Implement hierarchical view in sidebar using Vue #1521 and Epic: Concept Page #1484

Description of the changes in this PR

Adds Font Awesome spinner icons for loading:

• concept mappings
• hierarchical tree
• new concepts into hierarchical tree
• vocab and term counts on vocab page

Addresses requirement 3j in #1521

Known problems or uncertainties in this PR

No loading texts are added in this PR

Checklist

• phpUnit tests pass locally with my changes
• I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
• The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
• The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

[osma]

I tested this briefly and found a few issues within the code (see comments).

Also in the functionality, generally things are working well but there are a few issues:

Vocabulary home page

On the vocabulary home page (on my system, http://localhost/Skosmos/yso/en/ ), there is now a mappings box with a spinner that just spins forever:

The same happens on a concept page which doesn't have any mappings. For example the KANTO/FINAF page for myself http://localhost/Skosmos/finaf/fi/page/000152600 looks like this:

Possibly related to these, I can see this errors in the JS console (Firefox) on the vocab home page:

[Vue warn]: Extraneous non-props attributes (hasCounts) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <ResourceCounts key=0 concepts= 
Object { class: "http://www.w3.org/2004/02/skos/core#Concept", label: "Concept", count: 32423, deprecatedCount: 1650 }
 subTypes= 
Array(3) [ {…}, {…}, {…} ]
  ... > 
  at <App>

The FINAF concept page shows these errors in the JS console:

[Vue warn]: Unhandled error during execution of mounted hook 
  at <TabHierWrapper hierarchy= 
Array []
 selectedConcept="http://urn.fi/URN:NBN:fi:au:finaf:000152600" loadingChildren= 
Array []
  ... > 
  at <App>

and

Uncaught (in promise) TypeError: selected is undefined
    mounted http://localhost/Skosmos/resource/js/tab-hierarchy.js:211
    VueJS 6

Can you please try fixing these and then I can test it again?

[osma]

All the problems I reported earlier seem to be fixed now. Great work!

Do you think it would be possible to add Cypress tests for the spinners?

Other than that, I think this can be merged.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud