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

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

v5.x

Latest version

[X] I have tested the latest version

No Hitachi confidential content

[X] 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:

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)]

lumada-design / hv-uikit-react