FIXED: load behavior from Yuzool Navigation stack

I just implemented the Navigation stack by Yuzool. I am liking the stack a lot, but there is an issue when the page loads. Upon opening a page, the navigation data loads vertically, pushing the other content down, before settling into the expected formatting. This happens briefly, but is annoying, and the delay depends on internet speed and size of the page content. Presumably the stack loads and displays it’s data before the formatting commands kick in.

I am using Rapidweaver 8 with Foundation. The formatting delay seems to be most prominent on Firefox and Safari. Anyone have any idea what is going on or how to fix this? Example page here:

https://www.joelfletcher.com/creative-process/

Thanks!

It’s been a couple days with no comments on this issue. Hopefully at least the developer @yuzool will come forth at some point. Anyway, I have spent far too much time troubleshooting the issue, and presume that the normal behavior of the Navigation stack is that it’s formatting has a delayed load. This results in the text of all the page names loading vertically at first, and then the navigation bar takes it’s normal shape. Pages with lots of content seem make the issue more prominent, a couple seconds delay sometimes. It is a shame, because the Navigation stack is pretty nice otherwise. I would like to use it, but the page load issue is bad presentation in my opinion.

I have a lot of pages on my site, and have reverted all of them back to the standard Foundation Top Bar navigation. I will leave the example page in the first post active with the Navigation Stack for a few more days, in case anyone want to take a look.

I know @dave uses the Navigation stack a lot. He might be able to help. I believe he also develops some pretty large websites (i.e. many pages) using the Navigation stack. Unfortunately I can’t help you as I don’t use it.

Thanks @Mathew for alerting me - I missed this question. Are you using the most recent version, @Mysterion? I ask because when I first implemented it, the stack was painting the screen the chosen background color for a half second or so. But, at some point, it quit doing so - or, if it continues to do so, I’m not seeing it at the speed I’m connected at (300Mbps at home…but slower at work).

I also own Will Woodgate’s Gator navigation stack - it and Navigation are very similar in appearance. If it works, and Navigation won’t, then (imo) it’s money well spent. You can read more about it and download a free demo here: https://stacks4stacks.com/gator/. If you try out the free version, you will certainly need the following code in order to make the colors work correctly in foundation (I’ve sent this to Will, but I don’t see it on his site). Also, be aware that Gator uses Font Awesome 5, so adding version 4 icons will NOT work unless you add the following code to the site-wide code page (in the header area).

You can see a very content-heavy page with Navigation here: https://www.scdiag.com/locations/charleston/
You can see a site with Gator in it here: https://www.providence-subdivision.com/

Be sure to view them both on a phone (or use Chrome and reduce the width until the menus go responsive).

<<<< FOR GATOR >>>>
ADD TO THE SELECTORS AREA IN THE HUD:
.menu li.active a and .menu.dropdown li.active a

screenshot_3966

ADD TO THE HEAD AREA ON THE CODE PAGE:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

2 Likes

Thanks for your input @dave. Yes, I am using the latest version of Navigation, as it was purchased about a week ago. Your example site does not exhibit the exact same issue, but it does do what you describe about painting the screen the background color at first! You probably don’t see it due to your very fast internet speed. I have crummy DSL that is less than 3mbs, however that can reveal what other people with slower internet will experience.

Also I appreciate your pointing out Will’s Gator stack. It might be a possibility if my Navigation stack issue is not resolved. The Top Bar stack that comes with Foundation works fine for me in the meantime, even though it does not have all the bells and whistles that Navigation or Gator have.

Please check if this behavior also appears on a blank page.

Which theme are you using?

Remember it’s holiday season.

1 Like

Hi Jannis. The theme I am using is Foundation. If I use a blank page as you suggest, the entire page loads very fast, because there is no content. So fast, that I do not see the Navigation stack loading issue. The issue seems to become manifest on pages with more content. In fact, the page I used as an example is the most content-heavy on my site, a blog page using your very own Poster stack! Poster is an awesome stack by the way. :slight_smile:

1 Like

Thanks :pray:


Navigation Stack builds the content via JavaScript. So it might be that either content or other Stacks with a lot of JavaScript is “blocking” that. (Poster isn’t that html content or JavaScript heavy).

BTW: I don’t see your symptom on an iPhone, have to check with a real browser…

Out of interest - I am seeing the issue on Joel’s site. My connection hovers between 1 & 2Mbps…

Ok. Mine is 50Mbps :smile:

And just one other observation. The first time I visited the page there was no issue but I see it every time I do a shift-refresh in Safari.

One day I’ll have fast internet :disappointed:

It’s all about amount of content displayed and loaded from remote servers.

= Clear cache and reload.

1 Like

Thanks for the comments everyone. As Jannis suggests, it is looking like the cause is the Navigation stack competing with other stacks for content and Javascript to load. Furthermore, it is probable that Yuzool and the majority of the people who have purchased the Navigation stack had high speed internet, so the issue was not noticed by them. Unfortunately not everyone has a fast internet connection. Oh well.

I would be interested to know if you replace Navigation with @willwood’s Gator stack (as mentioned, there is a free trial version on his site), do you still see the issue? if not, I will probably replace Navigation with Gator on my sites (I own both Stacks, as well as Foundation…and a ton of other stacks…so I can probably open and save your file just fine). If you’d like me to test it, you’re welcome to send me one page of your project to dave@mediapressionsDOTcom. I’ll replace Navigation with Gator and then post to a non-indexable URL for you to look at.

Cheers,

Dave

Dave, I appreciate your offer to test out Gator for me. I might take you up on it. Or as you say, Will Woodgate offers a free trial version, which is a great.

FYI: The majority of Gator is CSS / HTML, to promote faster loading and the best possible website accessibility standards.

I only use jQuery Javascript for the following tasks AFTER the page has finished loading:

  • Give each list item and link a unique class selector name
  • Allocate the parent page links a keyboard shortcut accesskey
  • If tooltips are enabled, take the page name and add it as a title attribute to the link
  • Make groups of sub pages within the mobile menu toggle-able
  • Some helper functions to unify the support of tab navigation in different browsers (mostly older versions of IE)

All the main structure, style and animation of the menu is pure CSS / HTML. About 30 KB in total. :slightly_smiling_face:

2 Likes

If you do test the trial of Gator out and find it works better, please let me know! I can attest that it’s a rock-solid navigation system - I simply haven’t compared it side-by-side with Navigation.

All the best for a safe and happy New Year!

Apologies Joel @Mysterion - Japan has long festivities after Christmas.

I replied to your message earlier - if you can send me a demo staging link I can test and maybe add something in as a work around.

On the Navigation demo this page loads fine with Foundation:
http://demo.yuzoolthemes.com/navigation/page-2/page-3/

But as @instacks mentions it might be a conflict with some other Stacks loading on the page.

My internet is terrible so I can test your load speed no problem!

1 Like

Hi Michael. I uploaded the example page with your Navigation stack installed again… which I will leave up for a few days for you to test:

Attached is an image, showing screen grabs of how the page looks during load on the left, and loaded on the right.

1 Like

Thanks @Mysterion - I got a message from another user with a similar situation and can patch an update for this. I will find some hours over the weekend and ship an update :slight_smile:

In the meantime, there is a fadein option already there since 1.3.0:

Have you tried that to see if it helps?

Will also look at making the load faster :slight_smile:
Will post the results in here soon


Edit - @Mysterion my laptop is slow/old and connection poor and couldn’t see it in Safari. Switched to Chrome and can see exactly as your screenshot. Will take a look at it over the weekend and release a patch. Cheers

1 Like