slot: avoid Overview flash on uncached slot navigation#709
Open
barnabasbusa wants to merge 4 commits into
Open
slot: avoid Overview flash on uncached slot navigation#709barnabasbusa wants to merge 4 commits into
barnabasbusa wants to merge 4 commits into
Conversation
Inject a <style> rule into <head> from a tiny early script that hides every #tabContent > .tab-pane except the one matching location.hash, so the browser's first paint already shows the correct tab. The synchronous block after tabContent moves Bootstrap's active/show and aria-selected state onto the target pane, and DOM-ready strips the override style so subsequent tab clicks animate normally.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #708. With just that PR, navigating
/slot/35#ptcVotes→ next chevron →/slot/36#ptcVoteslands on the right tab, but on uncached page loads the browser briefly paints Overview before Bootstrap's.tab('show')fades over to the target — about 100ms of "flinch". Cached navigations don't show this.The fix is in two parts:
<script>placed before the tab markup readslocation.hash, sanitizes it, and injects a<style>rule into<head>that hides every#tabContent > .tab-paneand unhides only the target. Because the style is present while the parser is reading the panes, the browser's first paint already shows the right tab.tabContentnow also moves thenav-link.active/aria-selectedstate onto the target tab so Bootstrap's tab plugin agrees with what the user sees. On DOM-ready the override<style>is removed so subsequent tab clicks animate normally.Stacked on top of #708. Merge that first.
Test plan
/slot/<N>#ptcVotes(or open from an incognito window) — PTC Votes is visible from the first paint, no Overview flash.#ptcVotesactive — no flicker on any of them.#ptcVoteson a slot without PTC votes) — brief blank then Overview, no stuck blank state.