feat: Add skeleton to Home and Sidebar
diff --git a/erpnext/public/js/hub/Sidebar.vue b/erpnext/public/js/hub/Sidebar.vue
index 164e78d..be2b749 100644
--- a/erpnext/public/js/hub/Sidebar.vue
+++ b/erpnext/public/js/hub/Sidebar.vue
@@ -9,7 +9,10 @@
<li class="hub-sidebar-item is-title bold text-muted">
{{ __('Categories') }}
</li>
- <li class="hub-sidebar-item" v-for="category in categories" :key="category.label" v-route="category.route">
+ <li v-if="show_skeleton" class="hub-skeleton hub-sidebar-item" v-for="(c, $index) in [1, 2, 3, 4, 5, 6, 7]" :key="$index">
+ Category
+ </li>
+ <li class="hub-sidebar-item" v-else v-for="category in categories" :key="category.label" v-route="category.route">
{{ category.label }}
</li>
</ul>
@@ -57,11 +60,14 @@
},
],
categories: [],
+ show_skeleton: true
}
},
created() {
this.get_categories()
.then(categories => {
+ this.show_skeleton = false;
+
this.categories = categories.map(c => {
return {
label: __(c.name),
diff --git a/erpnext/public/js/hub/pages/Home.vue b/erpnext/public/js/hub/pages/Home.vue
index 4f9796d..9cf0bf4 100644
--- a/erpnext/public/js/hub/pages/Home.vue
+++ b/erpnext/public/js/hub/pages/Home.vue
@@ -9,7 +9,18 @@
v-model="search_value"
/>
- <div v-for="section in sections" :key="section.title">
+ <div v-if="show_skeleton">
+ <section-header>
+ <h4 class="hub-skeleton">Explore Explore Explore</h4>
+ </section-header>
+ <div class="row">
+ <div class="col-md-3 col-sm-4 col-xs-6 hub-card-container" v-for="(f, $index) in [1, 2, 3, 4, 5, 6, 7]" :key="$index">
+ <div class="hub-skeleton" style="height: 262px; width: 100%; margin-bottom: 25px;"></div>
+ </div>
+ </div>
+ </div>
+
+ <div v-else v-for="section in sections" :key="section.title">
<section-header>
<h4>{{ section.title }}</h4>
@@ -36,6 +47,7 @@
search_value: '',
sections: [],
+ show_skeleton: true,
// Constants
search_placeholder: __('Search for anything ...'),
@@ -52,6 +64,8 @@
country: frappe.defaults.get_user_default('country')
})
.then((data) => {
+ this.show_skeleton = false;
+
this.sections.push({
title: __('Explore'),
items: data.random_items