Improve performance for load menu

Forum rules
Please note that response time for technical support is within 3-5 business days.
vished
Posts: 479
Joined: 02 Feb 2014, 17:38

01 Nov 2020, 00:44

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
PF 8.0

vished
Posts: 479
Joined: 02 Feb 2014, 17:38

04 Nov 2020, 19:25

@PrimeTek / mert.sincan

Any updates?
PF 8.0

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

09 Nov 2020, 11:35

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,

vished
Posts: 479
Joined: 02 Feb 2014, 17:38

09 Nov 2020, 11:49

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:
Image

approx: 500ms later, it will be expanded (depends on the number of components in the content area etc.):
Image

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.
PF 8.0

vished
Posts: 479
Joined: 02 Feb 2014, 17:38

14 Nov 2020, 23:27

did you had a chance to check this?
PF 8.0

rider
Posts: 497
Joined: 05 Mar 2010, 13:17

24 Nov 2020, 08:41

Hi vished,

have you got a feedback from mert.sincan ?
I have the same issue.
Primefaces 12.0, WildFly 21

vished
Posts: 479
Joined: 02 Feb 2014, 17:38

10 Dec 2020, 14:03

Any updates?
PF 8.0

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

10 Dec 2020, 20:40

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,

rider
Posts: 497
Joined: 05 Mar 2010, 13:17

10 Dec 2020, 20:46

Just tried that.
I removed $(window).trigger('resize'); and removed also the images, but it´s not working.

Any other ideas?
Primefaces 12.0, WildFly 21

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

10 Dec 2020, 21:29

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.

Post Reply

Return to “Morpheus - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests