Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[fix] Tabs content flickering #10533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
sfc-gh-bnisco merged 1 commit into from
Feb 27, 2025
Merged

[fix] Tabs content flickering #10533

sfc-gh-bnisco merged 1 commit into from
Feb 27, 2025

Conversation

@sfc-gh-bnisco
Copy link
Collaborator

@sfc-gh-bnisco sfc-gh-bnisco commented Feb 27, 2025

Describe your changes

  • Fixes an issue where tab content would flicker due to a 0 width. This restores the previous behavior seen here

    streamlit/frontend/lib/src/components/core/Block/Block.tsx

    Lines 300 to 307 in 577db52

    window.requestAnimationFrame(() => {
    // We need to determine the available width here to be able to set
    // an explicit width for the `StyledVerticalBlock`.
    // The width should never be set to 0 since it can cause
    // flickering effects.
    setWidth(entry.target.getBoundingClientRect().width || -1)
    })

GitHub Issue Link (if applicable)

Testing Plan

  • Explanation of why no additional tests are needed
  • Unit Tests (JS and/or Python)
  • E2E Tests
  • Any manual testing needed?

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

@sfc-gh-bnisco sfc-gh-bnisco added security-assessment-completed Security assessment has been completed for PR change:bugfix PR contains bug fix implementation impact:users PR changes affect end users labels Feb 27, 2025
lukasmasuch
lukasmasuch approved these changes Feb 27, 2025
View reviewed changes
Copy link
Collaborator

@lukasmasuch lukasmasuch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@sfc-gh-bnisco sfc-gh-bnisco merged commit b2c77af into develop Feb 27, 2025
44 checks passed
@sfc-gh-bnisco sfc-gh-bnisco deleted the bnisco/fix-tab-flicker branch February 27, 2025 01:55
@raethlein
Copy link
Collaborator

raethlein commented Feb 27, 2025

Is it easily possible to add a unit test somewhere - e.g. Block.test.tsx - to ensure that the width is never 0?

@sfc-gh-bnisco sfc-gh-bnisco mentioned this pull request Feb 27, 2025
Merged
@sfc-gh-bnisco
Copy link
Collaborator Author

sfc-gh-bnisco commented Feb 27, 2025

@raethlein Yes! Follow-up PR here: #10547

sfc-gh-bnisco added a commit that referenced this pull request Feb 27, 2025
@sfc-gh-bnisco
[test] Add unit tests for calculated Block width (#10547)
e62993d 
## Describe your changes

- Follow-up from [this
comment](#10533 (comment))
to add unit tests for this expected behavior

## GitHub Issue Link (if applicable)

## Testing Plan

- ✅ Adds unit tests

---

**Contribution License Agreement**

By submitting this pull request you agree that all contributions to this
project are made under the Apache 2.0 license.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lukasmasuch lukasmasuch lukasmasuch approved these changes

@sfc-gh-nbellante sfc-gh-nbellante sfc-gh-nbellante approved these changes

Assignees

No one assigned

Labels

change:bugfix PR contains bug fix implementation impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@sfc-gh-bnisco @raethlein @lukasmasuch @sfc-gh-nbellante