Page 1 of 3
Improve performance for load menu
Posted: 01 Nov 2020, 00:44
by vished
Hi,
is there a possibility to improve the performance if I navigate from one page to another?
Currently the issue is that the menu on the left side is loading for a short moment as soon the page is loading, but this means also the content (from the middle of the page) is for a moment bigger than it should be.
After the menu is opened (loaded completely), the content will be reduced and it´s also the correct size.
If I compare this with other layout, like
https://www.primefaces.org/babylon/input.xhtml the speed is much more quicker here.
Can you fix this, please?
Thank you
Re: Improve performance for load menu
Posted: 04 Nov 2020, 19:25
by vished
@PrimeTek / mert.sincan
Any updates?
Re: Improve performance for load menu
Posted: 09 Nov 2020, 11:35
by mert.sincan
Hi,
Sorry for the delayed response! I'll check the differences between Babylon and Manhattan.
Also, can you add a video about this problem so that we can reproduce this problem more easily?
Best Regards,
Re: Improve performance for load menu
Posted: 09 Nov 2020, 11:49
by vished
Thank you very much.
I have not a video, but it can be reproduce very easy from the showcase:
https://www.primefaces.org/morpheus/dashboard.xhtml
If you navigate from one page to another it´s like this:
- At first the menu is not expanded:
approx: 500ms later, it will be expanded (depends on the number of components in the content area etc.):
It´s a little bit frustrating, if a user clicks on a button or in a input field in the content area, but during this moment, the menu is expanded and instead the cursor is in the inputtext, it will be executed a link from the menu (due to this delay) and redirect to another page..
If you compare that to Babylon, it´s not that case. The performance is much more better.
Many thanks in advance.
Re: Improve performance for load menu
Posted: 14 Nov 2020, 23:27
by vished
did you had a chance to check this?
Re: Improve performance for load menu
Posted: 24 Nov 2020, 08:41
by rider
Hi vished,
have you got a feedback from mert.sincan ?
I have the same issue.
Re: Improve performance for load menu
Posted: 10 Dec 2020, 14:03
by vished
Any updates?
Re: Improve performance for load menu
Posted: 10 Dec 2020, 20:40
by mert.sincan
Hi,
Sorry for the delayed response! I checked this issue. Maybe, it can be related to $(window).trigger('resize'); in layout.js. Could you please try this issue after removing $(window).trigger('resize');? Also, could you please test it on empty page demo (../morpheus/empty.xhtml)? The images and charts in the dashboard may be causing the performance issues.
(Note: Apart from trigger('resize'), there is no difference in the application with other layouts.)
Best Regards,
Re: Improve performance for load menu
Posted: 10 Dec 2020, 20:46
by rider
Just tried that.
I removed $(window).trigger('resize'); and removed also the images, but it´s not working.
Any other ideas?
Re: Improve performance for load menu
Posted: 10 Dec 2020, 21:29
by mert.sincan
Could you please make the following changes in layout.js?
Code: Select all
PrimeFaces.widget.Morpheus = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.wrapper = $(document.body).children('.layout-wrapper');
this.sidebar = this.wrapper.children('.layout-sidebar');
this.tabMenu = this.jq;
this.tabMenuNav = this.tabMenu.children('.layout-tabmenu-nav');
this.tabMenuNavItems = this.tabMenuNav.children('li');
this.tabMenuNavLinks = this.tabMenuNav.find('a');
this.topbar = this.wrapper.children('.topbar');
this.topbarMenu = this.topbar.children('.topbar-menu');
this.topbarItems = this.topbarMenu.children('li');
this.topbarLinks = this.topbarItems.children('a');
this.menuButton = $('#menu-button');
this.topbarMenuButton = $('#topbar-menu-button');
this.menuActive = false;
this.sidebarClick = false;
this.topbarLinkClick = false;
this.topbarMenuClick = false;
this._bindEvents();
},
_bindEvents: function() {
var $this = this;
this.menuButton.off('click.menu').on('click.menu', function(e) {
if($this.wrapper.hasClass('layout-wrapper-menu-active')) {
$this.hideMenu();
}
else {
var activeItem = $this.tabMenuNavItems.filter('.active-item');
activeItem = activeItem.length > 0 ? activeItem : $this.tabMenuNavItems.eq(0);
$this.openMenu(activeItem.children('a'));
}
$this.sidebarClick = true;
e.preventDefault();
});
this.tabMenuNavLinks.off('click.menu').on('click.menu', function(e) {
var link = $(this);
link.parent().siblings('.active-item').removeClass('active-item');
$this.openMenu(link);
$(this).children('.layout-tabmenu-tooltip').hide();
e.preventDefault();
});
$(document.body).off('click.layoutBody').on('click.layoutBody', function() {
if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
$this.topbarItems.filter('.active-topmenuitem').removeClass('active-topmenuitem');
$this.topbarMenu.removeClass('topbar-menu-visible');
}
if(!$this.sidebarClick && ($this.isOverlayMenu() || !$this.isDesktop())) {
$this.wrapper.removeClass('layout-wrapper-menu-active');
}
$this.topbarLinkClick = false;
$this.topbarMenuClick = false;
$this.sidebarClick = false;
});
},
openMenu: function(link, restore) {
this.sidebar.css('overflow','hidden');
var parent = link.parent();
parent.addClass('active-item');
this.wrapper.addClass('layout-wrapper-menu-active');
if(restore) {
this.wrapper.addClass('layout-wrapper-menu-active-restore');
}
this.tabMenu.children('.layout-tabmenu-contents').children('.layout-tabmenu-content').removeClass('layout-tabmenu-content-active').
eq(parent.index()).addClass('layout-tabmenu-content-active');
},
hideMenu: function() {
this.sidebar.css('overflow','visible');
this.wrapper.removeClass('layout-wrapper-menu-active layout-wrapper-menu-active-restore');
},
fireTabChangeEvent: function(tab) {
if (this.cfg.behaviors && this.cfg.behaviors['tabChange']) {
var ext = {
params: [
{name: this.id + '_newTab', value: tab.attr('id')},
{name: this.id + '_tabindex', value: tab.index()}
]
};
this.cfg.behaviors['tabChange'].call(this, ext);
}
},
isTablet: function() {
var width = window.innerWidth;
return width <= 1024 && width > 640;
},
isDesktop: function() {
return window.innerWidth > 1024;
},
isMobile: function() {
return window.innerWidth <= 640;
},
isOverlayMenu: function() {
return this.wrapper.hasClass('layout-overlay-menu');
},
isIOS: function(e) {
return ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)));
},
saveTabState: function(id) {
$.cookie('morpheus_expandedtab', id, {path: '/'});
},
clearTabState: function() {
$.removeCookie('morpheus_expandedtab', {path: '/'});
},
restoreTabState: function() {
this.expandedTab = $.cookie('morpheus_expandedtab');
if (this.expandedTab) {
var tab = $("#" + this.expandedTab.replace(/:/g, "\\:"));
this.openMenu(tab.children('a'), true);
}
else if(this.cfg.activeIndex) {
var active = this.tabMenuNavItems.eq(parseInt(this.cfg.activeIndex));
this.openMenu(active.children('a'), true);
}
}
});
/**
* PrimeFaces MorpheusMenu Component
*/
PrimeFaces.widget.MorpheusMenu = PrimeFaces.widget.BaseWidget.extend({
...
})
...
Please change PrimeFaces.widget.Morpheus with new one.