fix: List view skeleton

#14179 broke list view for every user other than Administrator
This is a better implementation of skeletons for views based on base_list

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

@@ -6,7 +6,11 @@ frappe.views.BaseList = class BaseList {
 	}
 
 	show() {
-		frappe.run_serially([
+		return frappe.run_serially([
+			() => this.show_skeleton(),
+			() => this.fetch_meta(),
+			() => this.hide_skeleton(),
+			() => this.check_permissions(),
 			() => this.init(),
 			() => this.before_refresh(),
 			() => this.refresh(),
@@ -150,6 +154,22 @@ frappe.views.BaseList = class BaseList {
 		}
 	}
 
+	fetch_meta() {
+		return frappe.model.with_doctype(this.doctype);
+	}
+
+	show_skeleton() {
+
+	}
+
+	hide_skeleton() {
+
+	}
+
+	check_permissions() {
+		return true;
+	}
+
 	setup_page() {
 		this.page = this.parent.page;
 		this.$page = $(this.parent);

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

@@ -9,35 +9,31 @@ frappe.views.ListFactory = class ListFactory extends frappe.views.Factory {
 		var me = this;
 		var doctype = route[1];
 
-		frappe.model.with_doctype(doctype, function () {
-			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;
+		// 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;
-				}
+		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);
+		}
+		me.set_cur_list();
 
-				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);
-				}
-				me.set_cur_list();
-			}
-		});
 	}
 
 	show() {

frappe/public/js/frappe/list/list_view.js

@@ -33,14 +33,38 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 
 	show() {
 		this.parent.disable_scroll_to_top = true;
+		super.show();
+	}
 
+	check_permissions() {
 		if (!this.has_permissions()) {
 			frappe.set_route('');
-			frappe.msgprint(__("Not permitted to view {0}", [this.doctype]));
-			return;
+			frappe.throw(__("Not permitted to view {0}", [this.doctype]));
 		}
+	}
 
-		super.show();
+	show_skeleton() {
+		this.$list_skeleton = this.parent.page.container.find('.list-skeleton');
+		if (!this.$list_skeleton.length) {
+			this.$list_skeleton = $(`
+				<div class="row list-skeleton">
+					<div class="col-lg-2">
+						<div class="list-skeleton-box"></div>
+					</div>
+					<div class="col">
+						<div class="list-skeleton-box"></div>
+					</div>
+				</div>
+			`);
+			this.parent.page.container.find('.page-content').append(this.$list_skeleton);
+		}
+		this.parent.page.container.find('.layout-main').hide();
+		this.$list_skeleton.show();
+	}
+
+	hide_skeleton() {
+		this.$list_skeleton?.hide();
+		this.parent.page.container.find('.layout-main').show();
 	}
 
 	get view_name() {

frappe/public/js/frappe/model/model.js

@@ -131,6 +131,7 @@ $.extend(frappe.model, {
 	with_doctype: function(doctype, callback, async) {
 		if(locals.DocType[doctype]) {
 			callback && callback();
+			return Promise.resolve();
 		} else {
 			let cached_timestamp = null;
 			let cached_doc = null;

frappe/public/scss/desk/list.scss

@@ -30,6 +30,15 @@
 	}
 }
 
+.list-skeleton {
+	min-height: calc(100vh - 200px);
+
+	.list-skeleton-box {
+		background-color: var(--skeleton-bg);
+		height: 100%;
+		border-radius: var(--border-radius);
+	}
+}
 
 .no-list-sidebar {
 	&[data-page-route^="List/"], [data-page-route^="List/"]{