fix(Header): wait for capabilities before show content

[Raubzeug]

Greptile Overview

Greptile Summary

Refactored capability loading to prevent header from displaying before capabilities are loaded.

Key changes:

• Created new useAllCapabilitiesStatus hook that consolidates both cluster and meta capabilities loading state
• Updated GetCapabilities component to use the new hook, removing duplicate logic
• Modified Header component to wait for capabilities before rendering content, preventing premature display of navigation and controls
• Properly cleaned up unused imports (useCapabilitiesQuery, useMetaCapabilitiesLoaded, useMetaCapabilitiesQuery) from Content.tsx

The refactoring improves code maintainability by centralizing capability loading logic and fixes a UX issue where the header would briefly appear before capabilities were fully loaded.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-structured refactoring that improves code organization and fixes a visual bug. The new useAllCapabilitiesStatus hook properly consolidates loading logic, uses React.useMemo for performance optimization, and maintains the same functional behavior. All imports are correctly updated, and the implementation follows React best practices.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
src/store/reducers/capabilities/hooks.ts	5/5	Extracted capability loading logic into reusable useAllCapabilitiesStatus hook that returns both loading state and error
src/containers/App/Content.tsx	5/5	Simplified GetCapabilities component by using new useAllCapabilitiesStatus hook, removed unused imports
src/containers/Header/Header.tsx	5/5	Added capability loading check to hide header content during initial load, preventing flash of unstyled content

Sequence Diagram

sequenceDiagram
    participant Header
    participant useAllCapabilitiesStatus
    participant Content/GetCapabilities
    participant capabilitiesApi
    participant metaCapabilitiesApi

    Header->>useAllCapabilitiesStatus: Call hook
    Content/GetCapabilities->>useAllCapabilitiesStatus: Call hook
    
    useAllCapabilitiesStatus->>capabilitiesApi: useGetClusterCapabilitiesQuery()
    useAllCapabilitiesStatus->>metaCapabilitiesApi: useGetMetaCapabilitiesQuery()
    
    capabilitiesApi-->>useAllCapabilitiesStatus: {data, error}
    metaCapabilitiesApi-->>useAllCapabilitiesStatus: Check loaded status
    
    useAllCapabilitiesStatus->>useAllCapabilitiesStatus: Calculate loading state<br/>(!capabilitiesLoaded || !metaCapabilitiesLoaded)
    
    useAllCapabilitiesStatus-->>Header: {loading, error}
    useAllCapabilitiesStatus-->>Content/GetCapabilities: {loading, error}
    
    alt loading = true
        Header->>Header: Return null (hide content)
        Content/GetCapabilities->>Content/GetCapabilities: Show LoaderWrapper
    else loading = false
        Header->>Header: Render breadcrumbs & controls
        Content/GetCapabilities->>Content/GetCapabilities: Render children
    end

Loading

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Total	Passed	Failed	Flaky	Skipped
378	375	0	1	2

Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

1. Scroll to row, get shareable link, navigate to URL and verify row is scrolled into view (tenant/diagnostics/tabs/queries.test.ts)
2. Copy result button copies to clipboard (tenant/queryEditor/queryEditor.test.ts)

Bundle Size: ✅

Current: 66.06 MB | Main: 66.06 MB
Diff: +0.83 KB (0.00%)

✅ Bundle size unchanged.

ℹ️ CI Information

• Test recordings for failed tests are available in the full report.
• Bundle size is measured for the entire 'dist' directory.
• 📊 indicates links to detailed reports.
• 🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

[greptile-apps]

_{3 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

syntax: typo: 'Capablities' should be 'Capabilities'

Suggested change

	export function useAllCapablitiesStatus() {
	export function useAllCapabilitiesStatus() {

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/store/reducers/capabilities/hooks.ts
Line: 33:33

Comment:
**syntax:** typo: 'Capablities' should be 'Capabilities'

```suggestion
export function useAllCapabilitiesStatus() {
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

syntax: typo: 'Capablities' should be 'Capabilities'

Suggested change

	useAllCapablitiesStatus,
	useAllCapabilitiesStatus,

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/containers/App/Content.tsx
Line: 17:17

Comment:
**syntax:** typo: 'Capablities' should be 'Capabilities'

```suggestion
    useAllCapabilitiesStatus,
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

syntax: typo: 'Capablities' should be 'Capabilities'

Suggested change

	useAllCapablitiesStatus,
	useAllCapabilitiesStatus,

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/containers/Header/Header.tsx
Line: 22:22

Comment:
**syntax:** typo: 'Capablities' should be 'Capabilities'

```suggestion
    useAllCapabilitiesStatus,
```

How can I resolve this? If you propose a fix, please make it concise.

[Copilot]

Pull request overview

This PR addresses a timing issue where the Header component could render before capabilities data is fully loaded. A new custom hook useAllCapablitiesStatus centralizes the logic for checking both cluster and meta capabilities loading status, which is then used to conditionally render Header content.

Key changes:

• Created a reusable hook to check the combined loading state of both capabilities queries
• Modified Header to wait for capabilities to load before rendering its content
• Refactored Content.tsx to use the new hook, eliminating code duplication

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
src/store/reducers/capabilities/hooks.ts	Introduces new hook useAllCapablitiesStatus to centralize capabilities loading state checking
src/containers/Header/Header.tsx	Updates Header to wait for capabilities before rendering content using the new hook
src/containers/App/Content.tsx	Refactors to use the new centralized hook, removing duplicated logic

[greptile-apps]

_{3 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}