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;