Adjust the layout of the blame information in blob page as soon as user triggers it

Merge Request Description

What does this MR do?

Implements immediate blame panel opening with skeleton loader to improve perceived performance when users click the Blame button in the blob viewer.

Related Issues

Closes #441970 (closed)

Implementation Details

Problem

When users click the Blame button, the layout adjustment waits for the server response, leading to slower perceived performance. Users experience a delay before seeing any visual feedback.

Solution

This MR implements a two-step approach:

1. Immediate layout adjustment - Shows skeleton loader as soon as user clicks the Blame button
2. Progressive content loading - Populates the blame column with real data when server responds

Changes Made

1. Event Emission (blob_header_viewer_switcher.vue)

• Added blame-loading-started event emission when blame button is clicked
• Provides coordination signal for skeleton loader display
• Maintains existing blame toggle functionality

2. Skeleton Loader (source_viewer.vue)

• Added GlSkeletonLoader component import and registration
• Added isBlameLoading state to track loading phase
• Skeleton appears in the exact same position as real blame content (same flex container)
• Shows when showBlame is true but before blameData arrives
• Automatically hides when real blame data loads

3. Loading State Management

• isBlameLoading set to true when showBlame becomes true
• isBlameLoading set to false when blameData arrives or blame is hidden
• Skeleton visibility tied to loading state: v-if="showBlame && isBlameLoading && !blameData.length"

4. Width Consistency

• Skeleton uses same width as actual blame column (300px)
• Uses gl-mr-3 margin to match real blame component spacing
• No horizontal layout shifts during transition

User Experience Flow

User clicks Blame button
    ↓ (Immediate)
Skeleton loader appears in blame column position
    ↓ (Network dependent)
GraphQL blame data loads
    ↓ (Immediate)
Skeleton disappears, real blame content renders

Screenshots

Before

Screen_Recording_2025-10-02_at_12.57.47_AM

After

Screen_Recording_2025-10-02_at_1.00.27_AM

Testing

Manual Testing

• Verify skeleton appears immediately on blame button click
• Verify no horizontal layout shifts occur
• Verify smooth transition from skeleton to real content
• Test with different file sizes and blame data volumes
• Test error states and fallback behavior
• Test with network throttling (Chrome DevTools)

Automated Testing

• Unit tests for skeleton loader visibility states
• Integration tests for blame loading flow

Performance Impact

• Perceived Performance: ⬆️ Immediate visual feedback
• Layout Stability: ⬆️ No horizontal shifts
• Network Impact: ➡️ No change (same GraphQL queries)
• Bundle Size: ➡️ Minimal (uses existing GlSkeletonLoader)

Feature Flag

This implementation works with the existing inline_blame feature flag:

• When enabled: Uses skeleton loader approach for inline blame
• When disabled: Falls back to traditional blame page navigation

Documentation

No documentation changes required - this is a UX improvement that doesn't change the blame functionality or user interface.

---