Index layout stylesheet and loading prop

What does this MR do and why?

Background

!231646 (closed) explored adding DetailLayout Vue and ::Layouts::DetailLayout View components. It identified:

1. Layouts should be responsible for basic loading state and supporting <template #loading> slot for individual implementations to render <gl-skeleton-loader> as they set fit. The loading prop ensures consistent use of <gl-loading-icon> size and margin.
2. CSS styles duplicated between layout components could diverge over time and require manual work to keep in-sync. Using layout classes (like component classes in GitLab UI) allows us to keep styles consistent between Vue and View implementations.
3. A #before slot is required to render items in layouts before <page-heading>.
4. Some views require more complex implementations of a page heading. Wrapping <h1> in page heading component with <slot name="heading-wrapper"> allows complex implementations to override the <h1> with multiple element etc. This occurs in work item detail which renders multiple components.

Changes

Index layout stylesheet and loading prop

• Add loading prop to IndexLayout components
• Move component styles to application stylesheet to keep Vue/View
• component styles in-sync

Iterations

1. !233013 (merged) Add loading prop to IndexLayout components/Move styles to layout stylesheets 👈 you are here
2. !233015 (merged) Detail layout Vue/View components
3. !233016 (merged) Add detail layout to alerts detail page
4. !233018 (merged) (Draft) Add detail layout to work item detail page (coordinate with plan)
5. Base layout component??? (stretch goal) #597890 (closed)

References

• gitlab-org#19509
• gitlab-org#19990
• gitlab-org/gitlab-services/design.gitlab.com#3187
• #596902 (closed)
• #596903 (closed)

Screenshots or screen recordings

How to set up and validate locally

• Run yarn storybook:start
• View http://localhost:6006/?path=/story/vue-shared-layouts-index-layout--with-slots

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.