[hub][vue] add skeleton state to DetailView

erpnext/public/js/hub/components/DetailView.vue

@@ -5,6 +5,26 @@
 				<button class="btn btn-xs btn-default" data-route="marketplace/home">{{ back_to_home_text }}</button>
 			</div>
 		</div>
+
+		<div v-if="show_skeleton" class="row margin-bottom">
+			<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 v-else>
 			<div class="row margin-bottom">
 				<div class="col-md-3">
 					<div class="hub-item-image">
@@ -32,6 +52,7 @@
 				<p class="col-md-12" v-html="section.content">
 				</p>
 			</div>
+		</div>
 
 	</div>
 </template>
@@ -40,7 +61,7 @@
 
 export default {
 	name: 'detail-view',
-	props: ['title', 'subtitles', 'image', 'sections'],
+	props: ['title', 'subtitles', 'image', 'sections', 'show_skeleton'],
 	data() {
 		return {
 			back_to_home_text: __('Back to Home')

erpnext/public/js/hub/components/skeleton_state.js

@@ -1,27 +0,0 @@
-function get_detail_skeleton_html() {
-	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>`;
-
-	return skeleton;
-}
-
-export {
-	get_detail_skeleton_html
-}

erpnext/public/js/hub/pages/Profile.vue

@@ -2,13 +2,15 @@
 	<div
 		class="marketplace-page"
 		:data-page-name="page_name"
+		v-if="init || profile"
 	>
 
-		<detail-view v-if="profile"
+		<detail-view
 			:title="title"
 			:subtitles="subtitles"
 			:image="image"
 			:sections="sections"
+			:show_skeleton="init"
 		>
 		</detail-view>
 	</div>
@@ -25,6 +27,9 @@ export default {
 	data() {
 		return {
 			page_name: frappe.get_route()[1],
+
+			init: true,
+
 			profile: null,
 			title: null,
 			subtitles: [],
@@ -41,6 +46,8 @@ export default {
 				'get_hub_seller_profile',
 				{ hub_seller: hub.settings.company_email }
 			).then(profile => {
+				this.init = false;
+
 				this.profile = profile;
 				this.title = profile.company;
 				this.subtitles = [

erpnext/public/js/hub/pages/Seller.vue

@@ -2,17 +2,18 @@
 	<div
 		class="marketplace-page"
 		:data-page-name="page_name"
+		v-if="init || profile"
 	>
-
+		<detail-view
-		<detail-view v-if="profile"
 			:title="title"
 			:subtitles="subtitles"
 			:image="image"
 			:sections="sections"
+			:show_skeleton="init"
 		>
 		</detail-view>
 
-		<h5>{{ item_container_heading }}</h5>
+		<h5 v-if="profile">{{ item_container_heading }}</h5>
 		<item-cards-container
 			:container_name="item_container_heading"
 			:items="items"
@@ -38,6 +39,8 @@ export default {
 			page_name: frappe.get_route()[1],
 			seller_company: frappe.get_route()[2],
 
+			init: true,
+
 			profile: null,
 			items:[],
 			item_id_fieldname: 'hub_item_code',
@@ -62,6 +65,7 @@ export default {
 				'get_hub_seller_page_info',
 				{ company: this.seller_company }
 			).then(data => {
+				this.init = false;
 				this.profile = data.profile;
 				this.items = data.items;
 

erpnext/public/js/hub/pages/item.js

@@ -1,6 +1,6 @@
 import SubPage from './subpage';
 import { get_detail_view_html } from '../components/detail_view';
-import { get_detail_skeleton_html } from '../components/skeleton_state';
+// import { get_detail_skeleton_html } from '../components/skeleton_state';
 import { get_review_html } from '../components/reviews';
 
 erpnext.hub.Item = class Item extends SubPage {
@@ -20,7 +20,7 @@ erpnext.hub.Item = class Item extends SubPage {
 
 
 	show_skeleton() {
-		this.$wrapper.html(get_detail_skeleton_html());
+		// this.$wrapper.html(get_detail_skeleton_html());
 	}