diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js index 7363afb912..741f2280bc 100644 --- a/erpnext/public/js/hub/marketplace.js +++ b/erpnext/public/js/hub/marketplace.js @@ -204,6 +204,10 @@ class SubPage { this.hide(); } + empty() { + this.$wrapper.empty(); + } + show() { this.refresh(); this.$wrapper.show(); @@ -325,6 +329,7 @@ erpnext.hub.SearchPage = class SearchPage extends SubPage { 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 @@ erpnext.hub.Item = class Item extends SubPage { }); } + show_skeleton() { + const skeleton = `
+
+
+
+
+
+

Name

+
+

Details

+

Ratings

+
+
+
+

Desc

+

Desc

+
+
+
+
`; + + 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 fd1a752c3b..20bf3c1219 100644 --- a/erpnext/public/less/hub.less +++ b/erpnext/public/less/hub.less @@ -139,6 +139,20 @@ body[data-route^="marketplace/"] { 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;