feat(minor): empty state for list view

frappe/public/js/frappe/list/base_list.js

@@ -3,9 +3,15 @@ frappe.provide("frappe.views");
 frappe.views.BaseList = class BaseList {
 	constructor(opts) {
 		Object.assign(this, opts);
+		this.init_page()
 	}
 
 	show() {
+		this.meta = frappe.get_meta(this.doctype);
+		this.set_title();
+		// in loading state?
+		if (!this.meta) return;
+
 		frappe.run_serially([
 			() => this.init(),
 			() => this.before_refresh(),
@@ -34,8 +40,6 @@ frappe.views.BaseList = class BaseList {
 
 	setup_defaults() {
 		this.page_name = frappe.get_route_str();
-		this.page_title = this.page_title || frappe.router.doctype_layout || __(this.doctype);
-		this.meta = frappe.get_meta(this.doctype);
 		this.settings = frappe.listview_settings[this.doctype] || {};
 		this.user_settings = frappe.get_user_settings(this.doctype);
 
@@ -150,13 +154,21 @@ frappe.views.BaseList = class BaseList {
 		}
 	}
 
-	setup_page() {
+	init_page() {
 		this.page = this.parent.page;
+		this.make_skeleton();
 		this.$page = $(this.parent);
 		!this.hide_card_layout && this.page.main.addClass('frappe-card');
 		this.page.page_form.removeClass("row").addClass("flex");
 		this.hide_page_form && this.page.page_form.hide();
 		this.hide_sidebar && this.$page.addClass('no-list-sidebar');
+	}
+
+	make_skeleton() {
+		this.skeleton = $(`<div class='skeleton-bg' style='min-height: 400px'></div>`).prependTo(this.page.main.parent());
+	}
+
+	setup_page() {
 		this.setup_page_head();
 	}
 
@@ -167,6 +179,7 @@ frappe.views.BaseList = class BaseList {
 	}
 
 	set_title() {
+		this.page_title = this.page_title || frappe.router.doctype_layout || __(this.doctype);
 		this.page.set_title(this.page_title);
 	}
 
@@ -280,6 +293,7 @@ frappe.views.BaseList = class BaseList {
 	}
 
 	setup_list_wrapper() {
+		this.skeleton.remove(); // clear skeleton
 		this.$frappe_list = $('<div class="frappe-list">').appendTo(
 			this.page.main
 		);

frappe/public/js/frappe/list/list_factory.js

@@ -8,38 +8,50 @@ frappe.views.ListFactory = class ListFactory extends frappe.views.Factory {
 	make (route) {
 		var me = this;
 		var doctype = route[1];
+		const meta_loaded = frappe.get_meta(doctype) ? true : false;
+		const page_name = frappe.get_route_str();
+		let view_class = this.get_view_class(route, doctype);
+		this.make_list_view_page(page_name, doctype, view_class);
+
+		if (view_class && view_class.load_last_view && view_class.load_last_view()) {
+			// view can have custom routing logic
+			return;
+		}
 
 		frappe.model.with_doctype(doctype, function () {
+			if (!meta_loaded) {
+				frappe.views.list_view[page_name].show();
+			}
 			if (locals['DocType'][doctype].issingle) {
 				frappe.set_re_route('Form', doctype);
 			} else {
-				// List / Gantt / Kanban / etc
-				// File is a special view
-				const view_name = doctype !== 'File' ? frappe.utils.to_title_case(route[2] || 'List') : 'File';
-				let view_class = frappe.views[view_name + 'View'];
-				if (!view_class) view_class = frappe.views.ListView;
-
-				if (view_class && view_class.load_last_view && view_class.load_last_view()) {
-					// view can have custom routing logic
-					return;
-				}
-
-				frappe.provide('frappe.views.list_view.' + doctype);
-				const page_name = frappe.get_route_str();
-
-				if (!frappe.views.list_view[page_name]) {
-					frappe.views.list_view[page_name] = new view_class({
-						doctype: doctype,
-						parent: me.make_page(true, page_name)
-					});
-				} else {
-					frappe.container.change_to(page_name);
-				}
+				frappe.container.change_to(page_name);
 				me.set_cur_list();
 			}
 		});
 	}
 
+	get_view_class(route, doctype) {
+		// List / Gantt / Kanban / etc
+		// File is a special view
+		const view_name = doctype !== 'File' ? frappe.utils.to_title_case(route[2] || 'List') : 'File';
+		let view_class = frappe.views[view_name + 'View'];
+		if (!view_class) view_class = frappe.views.ListView;
+
+		return view_class;
+	}
+
+	make_list_view_page(page_name, doctype, view_class) {
+		frappe.provide('frappe.views.list_view.' + doctype);
+
+		if (!frappe.views.list_view[page_name]) {
+			frappe.views.list_view[page_name] = new view_class({
+				doctype: doctype,
+				parent: this.make_page(true, page_name)
+			});
+		}
+	}
+
 	show() {
 		if (this.re_route_to_view()) {
 			return;

frappe/public/scss/desk/desktop.scss

@@ -739,6 +739,10 @@ body {
 	animation-duration: 400ms;
 }
 
+.skeleton-bg {
+	background-color: var(--skeleton-bg);
+}
+
 .workspace-skeleton {
 	transition: ease;
 	.widget-group-title {

frappe/public/scss/desk/global.scss

@@ -327,10 +327,6 @@ select.input-xs {
 	}
 }
 
-// .frappe-card {
-// 	@include card();
-// }
-
 .head-title {
 	font-size: var(--text-lg);
 	font-weight: 700;
@@ -591,4 +587,4 @@ details > summary:focus {
 .chart-container {
 	direction: ltr;
 }
-*/
+*/