Loading anomation for DNA matches

gramps-project · Nov 7, 2023 · e391f60 · e391f60
1 parent caee571
commit e391f60
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/src/components/GrampsjsDnaMatches.js b/src/components/GrampsjsDnaMatches.js
@@ -49,16 +49,21 @@ class GrampsjsDnaMatches extends GrampsjsTranslateMixin(LitElement) {
     return {
       data: {type: Array},
       person: {type: Object},
+      loading: {type: Boolean},
     }
   }
 
   constructor() {
     super()
     this.data = []
     this.person = {}
+    this.loading = false
   }
 
   render() {
+    if (this.loading) {
+      return this.renderLoading()
+    }
     return html`
       <table>
         ${this.data
@@ -68,6 +73,55 @@ class GrampsjsDnaMatches extends GrampsjsTranslateMixin(LitElement) {
     `
   }
 
+  renderLoading() {
+    const numRows =
+      this.person?.person_ref_list?.filter(ref => ref.rel === 'DNA')?.length ??
+      1
+    return html`
+      <table>
+        ${[...Array(numRows).keys()].map(
+          () => html`
+            <div class="match">
+              <div class="head">
+                <span class="name">
+                  <span class="skeleton" style="width: 7em; height: 1.2em;"
+                    >&nbsp;</span
+                  >
+                </span>
+              </div>
+              <dl>
+                <div>
+                  <dt>${this._('Relationship')}</dt>
+                  <dd>
+                    <span class="skeleton" style="width: 7em;">&nbsp;</span>
+                  </dd>
+                </div>
+                <div>
+                  <dt>${this._('Shared DNA')}</dt>
+                  <dd>
+                    <span class="skeleton" style="width: 3em;">&nbsp;</span>
+                  </dd>
+                </div>
+                <div>
+                  <dt>${this._('Shared Segments')}</dt>
+                  <dd>
+                    <span class="skeleton" style="width: 2em;">&nbsp;</span>
+                  </dd>
+                </div>
+                <div>
+                  <dt>${this._('Largest Segment')}</dt>
+                  <dd>
+                    <span class="skeleton" style="width: 3em;">&nbsp;</span>
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          `
+        )}
+      </table>
+    `
+  }
+
   _personCard(match) {
     return html`
       <div class="match">

diff --git a/src/views/GrampsjsViewPersonDna.js b/src/views/GrampsjsViewPersonDna.js
@@ -47,6 +47,7 @@ export class GrampsjsViewPersonDna extends GrampsjsView {
         .data="${this._data}"
         .strings="${this.strings}"
         .person="${this.person}"
+        ?loading="${this.loading}"
       ></grampsjs-dna-matches>
       <h3>${this._('Chromosome Browser')}</h3>
       <grampsjs-chromosome-browser