[hub] Item page skeleton
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index 7363afb..741f228 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -204,6 +204,10 @@
this.hide();
}
+ empty() {
+ this.$wrapper.empty();
+ }
+
show() {
this.refresh();
this.$wrapper.show();
@@ -325,6 +329,7 @@
erpnext.hub.Item = class Item extends SubPage {
refresh() {
+ this.show_skeleton();
this.hub_item_code = frappe.get_route()[2];
this.get_item(this.hub_item_code)
@@ -334,6 +339,30 @@
});
}
+ show_skeleton() {
+ const skeleton = `<div class="hub-item-container">
+ <div class="row">
+ <div class="col-md-3">
+ <div class="hub-item-skeleton-image"></div>
+ </div>
+ <div class="col-md-6">
+ <h2 class="hub-skeleton" style="width: 75%;">Name</h2>
+ <div class="text-muted">
+ <p class="hub-skeleton" style="width: 35%;">Details</p>
+ <p class="hub-skeleton" style="width: 50%;">Ratings</p>
+ </div>
+ <hr>
+ <div class="hub-item-description">
+ <p class="hub-skeleton">Desc</p>
+ <p class="hub-skeleton" style="width: 85%;">Desc</p>
+ </div>
+ </div>
+ </div>
+ </div>`;
+
+ this.$wrapper.html(skeleton);
+ }
+
get_item(hub_item_code) {
return hub.call('get_item_details', { hub_item_code });
}
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index fd1a752..20bf3c1 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -139,6 +139,20 @@
align-items: center;
}
+ .hub-item-skeleton-image {
+ border-radius: 4px;
+ background-color: @light-bg;
+ overflow: hidden;
+ height: 200px;
+ width: 200px;
+ }
+
+ .hub-skeleton {
+ background-color: @light-bg;
+ color: @light-bg;
+ max-width: 500px;
+ }
+
.hub-item-seller img {
width: 50px;
height: 50px;