diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js index beacb136e6..7af2cb2007 100644 --- a/frappe/public/js/frappe/list/base_list.js +++ b/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); diff --git a/frappe/public/js/frappe/list/list_factory.js b/frappe/public/js/frappe/list/list_factory.js index b467919d7e..acad85fdcb 100644 --- a/frappe/public/js/frappe/list/list_factory.js +++ b/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() { diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js index c5db7df88c..f8bf40d09b 100644 --- a/frappe/public/js/frappe/list/list_view.js +++ b/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 = $(` +
+
+
+
+
+
+
+
+ `); + 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() { diff --git a/frappe/public/js/frappe/model/model.js b/frappe/public/js/frappe/model/model.js index 4bbd8ab391..50f957c714 100644 --- a/frappe/public/js/frappe/model/model.js +++ b/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; diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss index 7fe04338ee..f4fe479828 100644 --- a/frappe/public/scss/desk/list.scss +++ b/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/"]{