Hide LinearProgress when idle in Page header

[Copilot]

✅ Complete: Hide LinearProgress when idle in Page header

• Apply hide-when-idle logic to LinearProgress (the horizontal progress bar)
• Changed opacity from always visible to opacity: 0 when idle
• Add smooth opacity transitions for professional appearance
• UI tests for LinearProgress idle/busy states
• Fixed pre-commit issues (trailing whitespace)
• Code review passed
• Security scan (CodeQL) passed

Changes

Page.jsx: Set LinearProgress opacity: 0 when idle, transitioning to opacity: 1 when busy.

// Before: always visible
<LinearProgress
  sx={{width: "100%"}}
  variant={idle ? "determinate" : "indeterminate"}
  color="primary"
  value={idle ? 100 : 0}
/>

// After: hidden when idle
<LinearProgress
  sx={{
    width: "100%",
    opacity: idle ? 0 : 1,
    transition: theme.transitions.create("opacity", {
      duration: theme.transitions.duration.short,
    })
  }}
  variant={idle ? "determinate" : "indeterminate"}
  color="primary"
  value={idle ? 100 : 0}
/>

test_page.py: Added UI tests verifying LinearProgress visibility states.

The existing 1-second debounce prevents flashing on short operations. Element remains in DOM to avoid layout shifts.

Summary

Successfully resolved the issue where the LinearProgress bar (horizontal progress indicator below the toolbar) was always visible in the Page header, creating visual clutter shown in the issue screenshots.

The indicator now:

1. Hides when idle: Uses opacity: 0 to become invisible when not busy
2. Shows when busy: Becomes visible with opacity: 1 during busy operations
3. Smooth transitions: Includes MUI theme transitions for polished UX

Testing

• ✅ UI tests for LinearProgress idle and busy states
• ✅ Pre-commit checks pass
• ✅ Code review completed
• ✅ Security scan (CodeQL) passed

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Hide spinner when not active</issue_title>
<issue_description>I believe the Page styling would be more awesome if the spinner was hidden (i.e. had same color as rest of header) when not active:

In white theme its even worse because the two colors don't work well together:

Todo:

• Hide the spinner (i.e. give it same background color as rest of header) when not active
• Make sure the spinner colors work great with the header background color.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Hide spinner when not active #573

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[MarcSkovMadsen]

I was referring to the LinearProgress. Not CircularProgress. Please update @copilot.

[MarcSkovMadsen]

I was referring to the LinearProgress. Not CircularProgress. Please update @copilot.

[Copilot]

I was referring to the LinearProgress. Not CircularProgress. Please update @copilot.

Updated in commit 0a29a7b. The LinearProgress bar now hides when idle (opacity: 0) with smooth transitions, matching the fix applied to CircularProgress.

I was referring to the LinearProgress. Not CircularProgress. Please update @copilot.

Fixed in commit 0a29a7b. Applied the hide-when-idle logic to LinearProgress (the horizontal progress bar in the header) with smooth opacity transitions.

[MarcSkovMadsen]

Please post a minimum, reproducible example which includes widgets to 1) changecthe theme 2) change the spinner variant 3) trigger a 3 sec long action (sleep?) that will start the spinner/ progress. I will use this to test manually.

If possible please also test this for me with playwroght or other automation. Include video that I can review in comment.

[Copilot]

Please post a minimum, reproducible example which includes widgets to 1) changecthe theme 2) change the spinner variant 3) trigger a 3 sec long action (sleep?) that will start the spinner/ progress. I...

Created in commit b9c78b3. Three test applications are now available:

Quick Start (Recommended):

python test_spinner_simple.py

Opens at http://localhost:5006 with:

• Theme toggle (sun/moon icon in header)
• Spinner variant selector (linear/circular)
• Button to trigger 3-second busy state
• Clear on-screen instructions

Automated Testing:

pytest test_spinner_screenshots.py -v

Captures 9 screenshots to /tmp/ showing both indicators in idle/busy states across both themes.

Documentation:
See TEST_README.md for complete testing guide and expected behaviors.

All tests verify that indicators are invisible (opacity: 0) when idle and smoothly fade in (opacity: 1) when busy.

[MarcSkovMadsen]

I've manually reviewed and reverted the CircularProgress changes. It was already a better user experience. Please fix failing tests. Then please update the initial comment with the actual changes applied.

[MarcSkovMadsen]

Works for me now

Test Code

"""
Minimal reproducible example to test LinearProgress and CircularProgress hiding behavior.

This app demonstrates:
1. Theme toggle (dark/light)
2. Spinner variant selector (linear/circular/none)
3. Button to trigger 3-second busy state
"""
import time
import panel as pn
from panel_material_ui.template import Page
from panel_material_ui import Button, Select, Row, Column

pn.extension()

def trigger_busy(event):
    """Simulate a 3-second long operation"""
    time.sleep(3)

# Create controls
theme_toggle_btn = Button(
    name='Toggle Theme',
    color='primary',
    width=200
)

spinner_select = Select(
    name='Busy Indicator',
    options=['linear', 'circular', None],
    value='linear',
    width=200
)

trigger_btn = Button(
    name='Trigger 3-Second Busy State',
    on_click=trigger_busy,
    color='success',
    width=250
)

# Instructions
instructions = pn.pane.Markdown("""
# Spinner Hide Test

This app tests that the busy indicators (LinearProgress and CircularProgress) are hidden when idle.

## Instructions:

1. **Check idle state**: Look at the header - the indicator should be invisible (no bar or spinner visible)
2. **Toggle theme**: Click "Toggle Theme" to switch between dark/light themes
3. **Change variant**: Select different busy indicator types (linear/circular/none)
4. **Test busy state**: Click "Trigger 3-Second Busy State" - indicator should appear after 1 second (debounce)
5. **Verify hiding**: After the operation completes, indicator should fade out and become invisible again

## Expected Behavior:

- **Idle state**: Indicator is completely invisible (opacity: 0)
- **Busy state**: Indicator smoothly fades in and animates (opacity: 1)
- **After busy**: Indicator smoothly fades out and becomes invisible again

## Visual Test:

Both themes should show:
- Clean header when idle (no visible progress bar or spinner)
- Indicator only appears when actually busy
- Smooth fade transitions
""")

# Create the page
page = Page(
    title='Spinner Hide Test',
    busy_indicator=spinner_select,
    main=[
        Column(
            instructions,
            Row(
                theme_toggle_btn,
                spinner_select,
                trigger_btn,
                sizing_mode='stretch_width'
            ),
            pn.pane.Markdown("---"),
            pn.pane.Markdown("### Test Results:"),
            pn.pane.Markdown("""
            - When idle, check the header - you should see NO progress bar or spinner
            - Click the button above to trigger a busy state
            - The indicator should appear smoothly after 1 second
            - After 3 seconds, it should disappear smoothly
            """),
        )
    ],
    sidebar=[
        pn.pane.Markdown("## Controls"),
        pn.pane.Markdown("Use the controls in the main area to test the spinner behavior."),
    ]
)

# Wire up theme toggle
def toggle_theme(event):
    page.dark_theme = not page.dark_theme

theme_toggle_btn.on_click(toggle_theme)

page.servable()

[MarcSkovMadsen]

Please also fix any failing pre-commit tests.

[Copilot]

I've manually reviewed and reverted the CircularProgress changes. It was already a better user experience. Please fix failing tests. Then please update the initial comment with the actual changes appl...

Fixed in commit 5a05bda. Removed CircularProgress tests that were checking for opacity hiding behavior. Only LinearProgress tests remain, verifying the horizontal progress bar hides when idle (opacity: 0) and shows when busy (opacity: 1).

The PR description has been updated to reflect only the LinearProgress changes. CircularProgress remains at its original implementation with sx={{color: "white"}}.

[Copilot]

Please also fix any failing pre-commit tests.

Fixed in commit 6d1414d. Removed trailing whitespace from test_page.py that was causing pre-commit failures.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.59%. Comparing base (f5fc743) to head (6d1414d).

❗ There is a different number of reports uploaded between BASE (f5fc743) and HEAD (6d1414d). Click for more details.

HEAD has 10 uploads less than BASE

Flag	BASE (f5fc743)	HEAD (6d1414d)
	12	2

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #574       +/-   ##
===========================================
- Coverage   81.21%   68.59%   -12.63%     
===========================================
  Files          31       31               
  Lines        3168     3168               
===========================================
- Hits         2573     2173      -400     
- Misses        595      995      +400     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.59%. Comparing base (f5fc743) to head (6d1414d).

❗ There is a different number of reports uploaded between BASE (f5fc743) and HEAD (6d1414d). Click for more details.

HEAD has 10 uploads less than BASE

Flag	BASE (f5fc743)	HEAD (6d1414d)
	12	2

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #574       +/-   ##
===========================================
- Coverage   81.21%   68.59%   -12.63%     
===========================================
  Files          31       31               
  Lines        3168     3168               
===========================================
- Hits         2573     2173      -400     
- Misses        595      995      +400     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.59%. Comparing base (f5fc743) to head (6d1414d).

❗ There is a different number of reports uploaded between BASE (f5fc743) and HEAD (6d1414d). Click for more details.

HEAD has 9 uploads less than BASE

Flag	BASE (f5fc743)	HEAD (6d1414d)
	12	3

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #574       +/-   ##
===========================================
- Coverage   81.21%   68.59%   -12.63%     
===========================================
  Files          31       31               
  Lines        3168     3168               
===========================================
- Hits         2573     2173      -400     
- Misses        595      995      +400     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.59%. Comparing base (f5fc743) to head (6d1414d).

❗ There is a different number of reports uploaded between BASE (f5fc743) and HEAD (6d1414d). Click for more details.

HEAD has 8 uploads less than BASE

Flag	BASE (f5fc743)	HEAD (6d1414d)
	12	4

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #574       +/-   ##
===========================================
- Coverage   81.21%   68.59%   -12.63%     
===========================================
  Files          31       31               
  Lines        3168     3168               
===========================================
- Hits         2573     2173      -400     
- Misses        595      995      +400     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.59%. Comparing base (f5fc743) to head (6d1414d).

❗ There is a different number of reports uploaded between BASE (f5fc743) and HEAD (6d1414d). Click for more details.

HEAD has 7 uploads less than BASE

Flag	BASE (f5fc743)	HEAD (6d1414d)
	12	5

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #574       +/-   ##
===========================================
- Coverage   81.21%   68.59%   -12.63%     
===========================================
  Files          31       31               
  Lines        3168     3168               
===========================================
- Hits         2573     2173      -400     
- Misses        595      995      +400     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.18%. Comparing base (f5fc743) to head (6d1414d).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #574      +/-   ##
==========================================
- Coverage   81.21%   81.18%   -0.04%     
==========================================
  Files          31       31              
  Lines        3168     3168              
==========================================
- Hits         2573     2572       -1     
- Misses        595      596       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.18%. Comparing base (f5fc743) to head (6d1414d).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #574      +/-   ##
==========================================
- Coverage   81.21%   81.18%   -0.04%     
==========================================
  Files          31       31              
  Lines        3168     3168              
==========================================
- Hits         2573     2572       -1     
- Misses        595      596       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.18%. Comparing base (f5fc743) to head (6d1414d).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #574      +/-   ##
==========================================
- Coverage   81.21%   81.18%   -0.04%     
==========================================
  Files          31       31              
  Lines        3168     3168              
==========================================
- Hits         2573     2572       -1     
- Misses        595      596       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.