Skip to content

Improve project detail expansion performance#3221

Closed
wahahaha-hub wants to merge 1 commit into
vinta:masterfrom
wahahaha-hub:improve-detail-panel-performance
Closed

Improve project detail expansion performance#3221
wahahaha-hub wants to merge 1 commit into
vinta:masterfrom
wahahaha-hub:improve-detail-panel-performance

Conversation

@wahahaha-hub

Copy link
Copy Markdown

What Changed

This PR replaces the inline project detail expansion with a fixed detail panel.

  • Desktop: project details open in a right-side panel.
  • Mobile: project details open as a bottom drawer.
  • The selected table row keeps a highlighted state.
  • Sorting and filtering close the active detail panel to keep state consistent.
ScreenShot_Effect_Preview

Problem

The previous inline expansion inserted detail content directly into the table flow.

On large tables, expanding rows near the top could cause noticeable lag because the browser had to recalculate layout for many following rows. This was especially visible when interacting with early rows in the list.

Why This Approach

The new fixed detail panel avoids changing the table height when a project is opened.

This reduces layout work while preserving the same project detail content and keeping the main table visually stable.

Interaction And Accessibility

  • Mouse click opens and closes project details.
  • Enter / Space opens project details from a focused row.
  • Escape closes the active detail panel.
  • Keyboard-opened panels move focus to the close button.
  • Closing with Escape returns focus to the selected row.
  • aria-expanded, aria-controls, and aria-labelledby are updated for the panel interaction.

Responsive Behavior

  • On desktop, details appear in a right-side panel.
  • On smaller screens, details appear as a bottom drawer.
  • Reduced-motion users do not get the panel transition animation.

Validation

  • uv run python website/build.py
  • uv run pytest website/tests/ -v
  • uv run ruff check .

@vinta

vinta commented Jun 29, 2026

Copy link
Copy Markdown
Owner

@wahahaha-hub Thanks for your PR! However, the way it expands is actually intentional, so that readers can select and compare different libraries.

@wahahaha-hub wahahaha-hub force-pushed the improve-detail-panel-performance branch from 981650b to 6095304 Compare June 29, 2026 14:34
@wahahaha-hub

Copy link
Copy Markdown
Author

Thanks for the feedback. After testing a revised version that preserves the inline comparison behavior, I don't think the performance improvement is strong enough to justify the change.

I'll close this PR for now and revisit this with a better approach if I find one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants