Skip to content

Set `lazy` prop for initial active tab

What does this MR do and why?

Related to #23466 (closed)

The lazy prop on GlTab determines if the child components should be hidden when the tab is not active. For the group overview tabs an API call is made when the child component is rendered so we want to set the lazy prop to true for all non-active tabs. Previously this prop was hardcoded so that the first tab was set to false and other tabs were set to true. In !97316 (merged) we add Vue router to the tabs but didn't update the lazy prop. This MR makes it so the lazy prop is dynamically set depending on which tab is loaded first (determined by the route).

Screenshots or screen recordings

Notice how the first tab is already loaded in the Before when it shouldn't be

Before After
Screen_Recording_2022-10-05_at_2.21.31_PM Screen_Recording_2022-10-05_at_2.21.03_PM

How to set up and validate locally

  1. Enable group_overview_tabs_vue feature flag
    • bin/rails console
    • Feature.enable(:group_overview_tabs_vue)
  2. Go to a group overview. e.g http://gdk.test:3000/flightjs

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Peter Hegman

Merge request reports

Loading