From 37935484ba3e901e67a958b85d227663c2b98ea9 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Thu, 6 Dec 2018 14:23:36 -0200
Subject: [PATCH] Adds skeleton loading to table on theme.

---
 src/admin/scss/_tables.scss                   | 26 ++++++++++
 .../class-tainacan-theme-helper.php           |  1 +
 src/theme-helper/view-mode-cards.vue          |  2 +-
 src/theme-helper/view-mode-table.vue          | 47 ++++++++++++++++---
 4 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/src/admin/scss/_tables.scss b/src/admin/scss/_tables.scss
index 50d12e561..1aa775469 100644
--- a/src/admin/scss/_tables.scss
+++ b/src/admin/scss/_tables.scss
@@ -13,6 +13,17 @@
         overflow-y: hidden;
         margin-bottom: 0px !important;
 
+        table.tainacan-table-skeleton {
+            tbody  {
+                td.skeleton {
+                    height: 52px;
+                    border-radius: 0;
+                    background-color: #eee !important;
+                    border-top: 5px solid white !important;
+                }
+            }
+        }
+
         table.tainacan-table {
             animation-name: appear;
             animation-duration: 0.5s;
@@ -151,6 +162,17 @@
                         vertical-align: middle;
                         line-height: 0.75rem;
                         border: none !important;
+
+                        &.thumbnail-cell .skeleton {
+                            height: 38px;
+                            width: 38px;
+                            margin-top: -38px;
+                            margin-left: auto;
+                            margin-right: auto;
+                            position: relative;
+                            z-index: -1;
+                        }
+
                         p { 
                             font-size: 0.875rem;
                             margin: 0px; 
@@ -159,9 +181,13 @@
                             white-space: nowrap;
                             max-height: 1.25rem;
                         }
+                        a:hover {
+                            text-decoration: none !important;
+                        }    
                     }
                     img.table-thumb {
                         max-height: 38px !important;
+                        max-width: 38px;
                         border-radius: 0px;
                     }
                     td.actions-cell {
diff --git a/src/theme-helper/class-tainacan-theme-helper.php b/src/theme-helper/class-tainacan-theme-helper.php
index 9cbbacb55..9a328867e 100644
--- a/src/theme-helper/class-tainacan-theme-helper.php
+++ b/src/theme-helper/class-tainacan-theme-helper.php
@@ -62,6 +62,7 @@ class Theme_Helper {
 			'dynamic_metadata' => true,
 			'icon' => '<span class="icon"><i class="tainacan-icon tainacan-icon-viewtable tainacan-icon-20px"></i></span>',
 			'type' => 'component',
+			'implements_skeleton' => true
 		]);
 		$this->register_view_mode('cards', [
 			'label' => __('Cards', 'tainacan'),
diff --git a/src/theme-helper/view-mode-cards.vue b/src/theme-helper/view-mode-cards.vue
index c85d0bee8..98c46b186 100644
--- a/src/theme-helper/view-mode-cards.vue
+++ b/src/theme-helper/view-mode-cards.vue
@@ -55,7 +55,7 @@
                                 v-if="item.thumbnail != undefined"
                                 :src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium[0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">  
                         <div class="skeleton"/>
-
+                        
                         <div class="list-metadata media-body">
                            <!-- Description -->
                             <p 
diff --git a/src/theme-helper/view-mode-table.vue b/src/theme-helper/view-mode-table.vue
index f994bd1a7..0155db6fc 100644
--- a/src/theme-helper/view-mode-table.vue
+++ b/src/theme-helper/view-mode-table.vue
@@ -14,6 +14,45 @@
                     <p>{{ $i18n.get('info_no_item_found') }}</p>
                 </div>
             </section>
+    
+            <!-- SKELETON LOADING -->
+            <table 
+                    v-if="isLoading"
+                    class="tainacan-table tainacan-table-skeleton">
+                <thead>
+                    <th 
+                            v-for="(column, index) in displayedMetadata"
+                            :key="index"
+                            v-if="column.display"
+                            class="column-default-width"
+                            :class="{
+                                    'thumbnail-cell': column.metadatum == 'row_thumbnail',
+                                    'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' || 
+                                                                                                        column.metadata_type_object.primitive_type == 'float' ||
+                                                                                                        column.metadata_type_object.primitive_type == 'int') : false,
+                                    'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' || 
+                                                                                                        column.metadata_type_object.primitive_type == 'item' || 
+                                                                                                        column.metadata_type_object.primitive_type == 'compound') : false,
+                                    'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' || column.metadata_type_object.related_mapped_prop == 'description') : false,
+                            }"
+                            :custom-key="column.slug">
+                        <div class="th-wrap">{{ column.name }}</div>
+                    </th>
+                </thead>
+                <tbody>
+                    <tr   
+                            :key="item"
+                            v-for="item in 12">
+                        <td 
+                                v-for="(column, index) in displayedMetadata"
+                                :key="index"
+                                v-if="column.display"
+                                class="column-default-width skeleton"/>
+                    </tr>
+                </tbody>
+            </table>
+
+            <!-- TABLE VIEW MODE -->
             <table 
                     v-if="!isLoading && items.length > 0"
                     class="tainacan-table">
@@ -106,6 +145,7 @@
                                 <img 
                                         class="table-thumb" 
                                         :src="item['thumbnail'].tainacan_small ? item['thumbnail'].tainacan_small[0] : (item['thumbnail'].thumbnail ? item['thumbnail'].thumbnail[0] : thumbPlaceholderPath)">
+                                <div class="skeleton"/>
                             </span> 
                         </a>
                         </td>
@@ -151,10 +191,3 @@ export default {
 }
 </script>
 
-<style>
-    td>a:hover {
-        text-decoration: none !important;
-    }
-</style>
-
-