Skip to content

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

@jorismak

Description

@jorismak

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions