From 58f5c17b338f56c4d3693bf9ecbe302dce8e4eb9 Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Mon, 13 Feb 2023 12:18:31 -0500
Subject: [PATCH] Initial implementation for loading animation and skeleton
 placeholders for components on Person canvas. (CFM-205) (#76)

---
 app/templates/element/mveaJs.php                    | 13 +++++++++++--
 app/webroot/css/co-base.css                         |  5 ++++-
 .../js/comanage/components/mvea/mvea-item.js        |  3 +++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/templates/element/mveaJs.php b/app/templates/element/mveaJs.php
index baf720ff8..3d5e43e57 100644
--- a/app/templates/element/mveaJs.php
+++ b/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"
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 4e38b78d5..a2354152c 100644
--- a/app/webroot/css/co-base.css
+++ b/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;
diff --git a/app/webroot/js/comanage/components/mvea/mvea-item.js b/app/webroot/js/comanage/components/mvea/mvea-item.js
index 1a9802140..f504aca29 100644
--- a/app/webroot/js/comanage/components/mvea/mvea-item.js
+++ b/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'">