Add Astro View Transitions for smooth client-side navigation#206
Draft
sergeychernyshev wants to merge 1 commit into199-separate-pagesfrom
Draft
Add Astro View Transitions for smooth client-side navigation#206sergeychernyshev wants to merge 1 commit into199-separate-pagesfrom
sergeychernyshev wants to merge 1 commit into199-separate-pagesfrom
Conversation
Enable Astro's built-in View Transitions across the site to eliminate full-page reloads when navigating between pages. - Add <ViewTransitions /> to Layout.astro and index.astro - Add transition:name/animate directives to ResultLayout for stable chrome (title, overview, tabs nav) with fade on tab content - Wrap all interactive <script> bodies in astro:page-load handlers so event listeners re-bind after client-side DOM swaps (theme toggle, list/grid switcher, resource filters, console filters, metrics legend, waterfall init, upload form) - Reset Waterfall component state on each navigation - Guard Console filter button creation against duplicates
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
1 participant
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
<ViewTransitions />) across the entire site to eliminate full-page reloads when navigating between pagestransition:name/transition:animatedirectives to the shared ResultLayout so the header, overview, and tab nav stay stable while tab content crossfades<script>bodies inastro:page-loadevent handlers so event listeners re-bind after client-side DOM swapsDepends on
This PR is based on the
199-separate-pagesbranch (dedicated tab URLs). It should be merged after that branch lands.Details
Problem: With the new per-tab URL structure, every tab switch is a full page navigation. The entire page (header, overview panel, screenshot, tab nav) flashes and re-renders even though only the tab content changes.
Solution: Astro View Transitions intercept link clicks and perform client-side DOM diffing instead of full reloads. Elements with matching
transition:nameattributes morph in place; the tab content area usestransition:animate="fade"for a smooth crossfade.Scripts fix: Astro's client router only executes
<script>modules once. After a soft navigation, the DOM is swapped but scripts don't re-run, leaving new elements without event listeners. All interactive scripts are now wrapped indocument.addEventListener('astro:page-load', ...)which fires on initial load AND after every client-side navigation.Files changed
Layout.astro<ViewTransitions />to<head>index.astro<ViewTransitions />(standalone page)ResultLayout.astrotransition:name/transition:animateon header, title, overview, tab contentTabs.astrotransition:nameon tab navTopNav.astroastro:page-loadwrapper for theme toggleresults.astroastro:page-loadwrapper for list/grid switcherupload.astroastro:page-loadwrapper for upload formAllMetrics.astroastro:page-loadwrapper for legend/diagram interactionsConsole.astroastro:page-loadwrapper + duplicate button guardResources.astroastro:page-loadwrapper for filtersWaterfall.astroastro:page-loadwrapper + state reset on navigationCloses #199
✨ AI-assisted