themesberg / volt-bootstrap-5-dashboard

Free and open source Bootstrap 5 Admin Dashboard Template with vanilla Javascript
https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/quick-start/
MIT License
2.61k stars 302 forks source link

Sidebar gets caught in open/close loop #49

Closed PerryCodes closed 2 years ago

PerryCodes commented 3 years ago

GitHub has a 10mb limit on files, so I tossed this on a Gdrive: https://drive.google.com/file/d/12hSgoph1vvrjHUktcJn1H5eejAbe0xJz/view?usp=sharing

zoltanszogyenyi commented 3 years ago

Hey @PerryCodes,

Thanks for the video. Please specify your OS version and browser version. I tried to reproduce this on a Mac, didn't have this issue. I suspect this may be a Windows issue, so we'll need to provide a fix using the OS.

Thanks, Zoltan

zoltanszogyenyi commented 2 years ago

@PerryCodes we'll address this issue tommorow

PerryCodes commented 2 years ago

Zoltán - So very good to hear!! I think this is one of the best admin templates out there. At first, my project was going to use Angular, which doesn’t have this bug. Same with the React/Vue/Laravel versions… no bug. Now this project has switched to server-rendered plain ASP.NET Core… so having a Bootstrap template that can supplement my “not a designer" syndrome I suffer from, that would be awesome.

If it were just the “opening/closing” that would be one thing… but once it goes into that state, you can see from this screenshot that another problem persists. I do not have my sidebarMenu set to “closed” and I’ve been hovering for several seconds with the mouse… yet the sidebarMenu stays in a “closed” when it should not be.

Volt Bug

zoltanszogyenyi commented 2 years ago

@PerryCodes we've made a new release fixing the problem for Volt Pro. In a few hours you'll be able to download the new version from the "downloads" section. It took use about 2 days to fix this, it was a pesky little bug, but we managed to fix it by rendering the JS for the sidebar before the animation would happen from expanded to contracted. It was a weird bug because it also depended on how fast your browser/computer could render the UI and the JS.

PerryCodes commented 2 years ago

Good news. Though it's been about 18 hours and I still see version 1.4.1 in downloads and no related changes to the code here. You still working on getting it ready?

zoltanszogyenyi commented 2 years ago

Hey @PerryCodes,

We encountered a problem after adding Webpack to Volt (another feature that we have added now) and we worked on that yesterday. I hope that today we can make a safe and stable release :)

zoltanszogyenyi commented 2 years ago

@PerryCodes the fix is now live and you can download it from Themesberg :)

PerryCodes commented 2 years ago

Nope. The fix may be live on your server, but you haven’t pushed the fix out to GitHub (last change was 07b6850 2021-06-21) and the Pro download is still only 1.4.1.

PerryCodes commented 2 years ago

I've checked https://demo.themesberg.com/volt-pro/ and it still experiences this issue.

zoltanszogyenyi commented 2 years ago

Hello @PerryCodes,

I haven't changed the versioning for the Pro version for this particular fix, but the codebase has been updated with the sidebar fix. Regarding the live demo, it is possible that because of the caching you are not seeing the changes.

Based on our reproduction of the bug, we fixed the issue so that it may no longer flicker when navigating between pages by loading the sidebar faster using Webpack features and loading the sidebar faster based on the localStorage value of the expanded/not expanded state of the sidebar.

With that being said, it is a particularly tricky bug, because it may also depend on the browser, screen, and performance of a given computer. In terms of JavaScript logic and CSS styling, there is no flaw, but it does seem that the flickering may still happen in certain scenarios (although we have fixed and tested our own case and it no longer happens).

I believe that the bug that you see on the live demo is because of the caching that we use via Cloudflare, so please try accessing the live demo via another browser or incognito mode. I have now cleared the caching on Cloudflare, I hope you will see the latest JavaScript version there as well.

Regarding the update on Github, this feature is only for the pro version so obviously there is no need to apply this update to the open-source version of Volt.

The fix is not "imaginary", we've invested 3 days into trying to first reproduce the bug (which was very difficult to catch in the first place) and then also provide a fix. We even changed the build flow in order to have more tools to catch and fix this bug, which we actually did on our end. However, having our reproduction of the issue fixed does not mean that there is no possibility that the flickering can still happen in another environment (although we haven't actually seen this yet).

Please download the latest version of Volt Pro from your Themesberg "downloads" section and see if this issue still exists on your machine locally. If it does, please provide a screencast of it and we'll see what we can do.

Thanks for understanding. We're trying our best at fixing this one :)

Cheers, Themesberg team

PerryCodes commented 2 years ago

My apologies - while I find it very uncommon and quite frankly wrong make a change like this but leave the version number the same... it's your product and you're free to do what you wish.

Coincidentally, while testing the new version 1.4.1, I discovered undesirable behavior has now found its way in: https://drive.google.com/file/d/1huJ-PN2hyADobXtEcZwY0pAVPyCe7TPP/view?usp=sharing

You can see when making navbar selections, all screen content now shifts position after being initially loaded. For comparison, the first tab in this video is the old cached version for reference. You can tell its the old version because it still has the "flicker" issue... This old version, however, does not have the "shifting content" bug.

zoltanszogyenyi commented 2 years ago

Hey @PerryCodes,

We haven't made a new version (1.4.2) because we still wanted to check out whether the fix was good or not. Besides, we've been working on a few more adjustments so we wanted to put all of these things together for the 1.4.2 version.

Regarding the new bug, that is interesting. I've tried it out on multiple browsers (on a Mac device) and couldn't reproduce this. I'll check this out on a Windows device too. It could be related to the scrolling bar.