Initial implementation for loading animation and skeleton placeholders for components on Person canvas. (CFM-205)

app/templates/element/mveaJs.php

@@ -66,7 +66,8 @@
           status: '<?= __d('field', 'datepicker.hour') ?>',
           unverified: '<?= __d('field', 'unverified') ?>',
           visit: '<?= __d('information', 'global.visit.link') ?>'
-        }
+        },
+        isLoading: true
       }
     },
     components: {
@@ -121,8 +122,16 @@
 <div id="<?= $htmlId ?>" class="col cm-mvea-col">
   <div class="card h-100">
     <div class="card-body">
-      <h2 class="card-title"><?= $title ?></h2>
+      <h2 class="card-title">
+        <?= $title ?>
+        <span v-show="isLoading" class="co-loading-mini" role="status">
+          <span></span><span></span><span></span>
+        </span>
+      </h2>
       <div class="card-text">
+        <ul v-show="isLoading" class="cm-mvea fields data-list skeleton-list">
+          <li><span class="visually-hidden">Loading...</span></li>
+        </ul>
         <mveas
           :mveas="this.mveas"
           :core="this.core"

app/webroot/css/co-base.css

@@ -1506,7 +1506,7 @@ table.list-mode .read-only-link-container {
   color: var(--cmg-color-gray-003);
   padding: 0 0.5em;
 }
-/* LOADING ANIMATION */
+/* LOADING ANIMATION & SKELETONS */
 @keyframes loading {
   0%   { opacity: 0.3; }
   30%  { opacity: 1.0; }
@@ -1576,6 +1576,9 @@ table.list-mode .read-only-link-container {
 .co-loading-mini span:nth-child(3) {
   animation-delay: 0.4s;
 }
+.skeleton-list li {
+  height: 2.2rem;
+}
 /* BUTTONS */
 .btn {
   text-transform: uppercase;

app/webroot/js/comanage/components/mvea/mvea-item.js

@@ -39,6 +39,9 @@ export default {
       return constructLanguageString(lang)
     }
   },
+  mounted() {
+    this.$parent.$parent.isLoading = false;
+  },
   template: `
     <!-- Names -->
     <li class="field-data-container" v-if="this.core.mveaType == 'names'">