Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Opening of Vertical Navigation (Slider Mode) flickers when selected menu id is a submenu #3563

Open
2 tasks done
loonatic opened this issue Aug 3, 2023 · 1 comment
Open
2 tasks done
Labels
➕ enhancement An enhancement to an existing feature

Comments

@loonatic
Copy link
Contributor

loonatic commented Aug 3, 2023

Which version of NEXT UI Kit are you opening this bug for?

v5.x

Latest version

  • I have tested the latest version

No Hitachi confidential content

  • I'm not including any Hitachi confidential content

Current behavior 😯

When expanding the Vertical Navigation widget (in slider mode) where the selected menu id is a submenu, there is a noticeable flicker causing the user to see a blank menu, then the first level of the data and only then the selected submenu tree.

Expected behavior 🤔

Smoother transition to the selected menu when Vertical Navigation expands.

Steps to reproduce 🕹

Enter sandbox link: https://stackblitz.com/edit/github-qmrcpm-7ehfox

And/or the steps to reproduce:

  1. On the provided sandbox link, refresh the preview to see it happen

When debugging the "issue" is more clearly seen when we debug on:

VerticalNavigation.tsx:

// navigationSlider
  const withParentData = useMemo(
    () => fillDataWithParentId(parentData),
    [parentData]
  );

Navigation.tsx:

  useEffect(() => {
    if (setParentData) setParentData(data);
  }, [data, setParentData]);
  useEffect(() => {
    if (
      withParentData &&
      selected &&
      setParentItem &&
      getParentItemById(withParentData, selected)
    ) {
      setParentItem(getParentItemById(withParentData, selected));
    }
  }, [withParentData, selected, setParentItem]);

As it sets the ParentData on the Navigation.tsx with an empty vertical navigation, then sets the ParentItem on the Navigation.tsx (but here even though ParentData has data, WithParentData does not and so does nothing), then it goes to fillDataWithParentId on VerticalNavigation (and here it will have the first level od the items drawn) and then jump again to set the ParentItem on the Navigation.tsx (and makes the "navigation" to the selected menu).

Context 🔦

No response

Your Environment 🌎

Device: [laptop]
OS: [Windows10]
Browser [chrome]
Version [115.0.5790.99 (Official Build) (64-bit)]

@loonatic loonatic added the ⌛ needs triage Waiting for a review. These issues haven't been looked at yet by a maintainer. label Aug 3, 2023
@zettca
Copy link
Member

zettca commented Aug 4, 2023

Hello @loonatic 👋

We'll take a look 👍

@zettca zettca added ➕ enhancement An enhancement to an existing feature and removed ⌛ needs triage Waiting for a review. These issues haven't been looked at yet by a maintainer. labels Aug 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
➕ enhancement An enhancement to an existing feature
Projects
None yet
Development

No branches or pull requests

2 participants