Repository navigation
feat(gallery): add a full-screen wall of every spinner - #41
Open
evanroyrees wants to merge 7 commits into
Open
evanroyrees wants to merge 7 commits into
evanroyrees wants to merge 7 commits into
Conversation
/wall shows one bare 64px tile per spinner on a viewport-filling scroller. Hover or focus shows a tooltip with the name, namespace and description, click opens the spinner's page, Esc or the close button returns to the overview. Linked from the header, navbar and search. Wall tiles reuse the overview previews; WALL_SCALE and a fixed size for the react-spinners dot rows keep every spinner inside its tile, which the new test checks. Signed-off-by: Evan Rees <evanroyrees@gmail.com>
Hover waits 500ms before the tooltip shows, so scrolling or sweeping across the wall stays quiet, and any scroll hides it. Keyboard focus still shows it at once. Signed-off-by: Evan Rees <evanroyrees@gmail.com>
Signed-off-by: Evan Rees <evanroyrees@gmail.com>
The header icon is the one entry point to the wall. It gets a CSS tooltip (Mantine's Tooltip needs the ref React 19 does not hand it) that shows after a short delay. Signed-off-by: Evan Rees <evanroyrees@gmail.com>
474 live spinners meant thousands of animated layers and 160 canvas rAF loops, over a gigabyte in the tab. Tiles start parked (no preview, loadersz paused) and an IntersectionObserver wakes those within 300px of the viewport and parks them again on scroll-out. Signed-off-by: Evan Rees <evanroyrees@gmail.com>
…ewport Profiled in headless Chrome: a clip per animated tile cost about 40% of the frame time while scrolling, and frame time scales with the number of live tiles. Removing the overflow clip (WALL_SCALE already keeps every spinner inside its tile) and waking tiles within 120px instead of 300px takes the average scroll frame from about 143ms to about 63ms. Signed-off-by: Evan Rees <evanroyrees@gmail.com>
…en overview cards The landing page leads with one card per library instead of one featured spinner. A library with few spinners shows them all; more revolve in even pages. Libraries with sections (flicker, gridora, loadersz) get a row per section, each turning on its own. Only the active card's visible page renders. The overview below it was the heavy part of the page (every card live, over a gigabyte after scrolling), so cards now park until they are near the viewport, the way the wall's tiles do: running animations on the landing page go from about 2900 to under 100. Signed-off-by: Evan Rees <evanroyrees@gmail.com>
This branch has not been deployed
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
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.
What
Adds
/wall: a full-viewport, scrollable matrix of every spinner (474), so many can be seen at once without any site text, and as a showcase.dlc.<family>and description.WALL_SCALEshrinks them, and the react-spinners dot rows get a fixed size because a transform cannot undo their wrap.test_wall_has_every_spinner_and_none_clipschecks the tile count, that no tile clips its spinner, the tooltip, and click-through._worst_overflownow takes a selector so the overview's clip scan is reused.Checklist
feat:/fix:/perf:/revert:(if this should ship in the next PyPI release) orchore:/docs:/ci:/test:/style:/refactor:(if not)