druxt.js icon indicating copy to clipboard operation
druxt.js copied to clipboard

druxt-menu redraws on every page, even if the data is already in vuex store

Open jorismak opened this issue 2 years ago • 0 comments

Describe the bug From a very minimal scaffolded project, rendering a menu works fine. But navigating to another page (through nuxt-link, so real SPA change) will re-render the menu. You'll also see a hit in the inspector-network-tab that refreshes the menu-items again. So, it's a very short 'flash' of no menu that turns into the menu.. but everytime you navigate. On bigger sites this gets really annoying, I'm guessing?

To Reproduce Steps to reproduce the behavior:

  1. Go to https://3000-decipher-druxtmenudebug-pqw30l8muug.ws-us71.gitpod.io/
  2. Click on 'test'
  3. Click on 'home'
  4. Click on 'test'
  5. Click on 'home'
  6. ....

Expected behavior The menu should be 'instantly' there, without a flash of 'no menu'. It's OK and very smart if it still refreshes from the JSON-API and updates if needed. But it appears to start out with 'no menu items' when the page is rendered, and then the menu_items are fetched. Maybe Vuex is not used here? Of maybe the menu is rendered before even the Vuex items are returned?

Media https://filedn.eu/lIyLo2maGUwuy7XtCSQMTxY/menu_redraw.mp4 I've recorded it with my phone because I thought a screen recording might not be fast enough to show the flashes. In hindsight, it would've been OK :).

Your Environment (please complete the following information):

  • Device: Windows 11 64 Windows laptop, Core i9-12900h, rtx3050ti
  • OS: Windows 11
  • Browser Edge (Chromium)
  • Version 106

Additional context We discussed this on discord, where you made this sandbox. You've seen the problem as well, you said, and asked me to make this ticket.

jorismak avatar Oct 20 '22 09:10 jorismak