Repository navigation
feat: add loadersz family - #36
Merged
Merged
Conversation
Wrap the loadersz npm library (0.9.0, MIT) as dlc.loadersz, a new family of 160 canvas-based loading indicators. The single Loader component takes a state prop to select among semantic state names. - Pin loadersz ^0.9.0 in package.json - Add LoaderszLoader React wrapper rendering the <loadersz-loader> web component with snake_case Dash props - Map rate -> speed (both are direct multipliers), size and color pass through directly, playing -> paused = !playing - Register all 160 states on the dlc.Loading registry with categories (loaders, systems, data, reasoning, atmosphere, motion) - Add family to gallery with category sections highlighting the chart-shaped data group (heatmap, sankey, treemap, bar chart) - Update UPSTREAM-INVENTORY.md, NOTICE, README family table - Add tests for rate mapping, registry coverage, namespace exports, category completeness, and chart state membership - Exclude loadersz from CSS tempo tests (canvas renderer, like m3) Co-authored-by: Evan Rees <evanroyrees@users.noreply.github.com>
Co-authored-by: Evan Rees <evanroyrees@users.noreply.github.com>
Co-authored-by: Evan Rees <evanroyrees@users.noreply.github.com>
The bare `import 'loadersz'` side-effect import was tree-shaken by
webpack in production mode: the loadersz entry re-exports
registerLoadersz but never calls it, and the chunk file's self-calling
registration was eliminated because the chunk is not listed in the
package's sideEffects array.
Fix: explicitly import registerLoadersz from 'loadersz' and call it at
module scope, matching what loadersz's own React adapter does. This
forces webpack to retain the customElements.define() call.
Add a browser regression test (test_loadersz_canvas_renders) that
starts a Dash app with five representative loadersz states and verifies:
- customElements.get('loadersz-loader') is defined
- each <loadersz-loader> contains a <canvas> child
- each canvas has non-zero dimensions
- each canvas has at least one non-transparent pixel
Co-authored-by: Evan Rees <evanroyrees@users.noreply.github.com>
LOADERSZ_NO_OPS had listed every visual option as ignored so the detail page never rendered density, hue, theme, particle_radius, or the common size/color/rate/playing controls. The wrapper already forwarded the full upstream attribute set; trim the ignore list to state (the page itself) and add gallery specs for the canvas knobs. Skip loadersz in the CSS-snapshot control test (canvas, like m3) and assert instead that each option reaches the custom element and that the detail page shows the live controls. Hyphenated state names such as bar-charting now match the detail route. Co-authored-by: Evan Rees <evanroyrees@users.noreply.github.com>
The gallery always-sent accent colour overrode every loadersz state and made the hue control a no-op. Omit color at the native default, skip empty color on the wrapper, and test that live knobs reach the element and the synced snippet. Co-authored-by: Evan Rees <evanroyrees@users.noreply.github.com>
…r brand mark The loadersz page listed every prop as a no-op, so it showed only "Custom classes". Offer size, color, rate, playing, density, particle radius, theme, hue and aria-label with loadersz's own ranges and defaults. Hue and theme only show once the color is cleared, so an emptied color is no longer sent. Add the sidebar icon rule, keep the 160 always-animating canvases out of the header mark, and stop the color field painting white in dark mode. Check the loadersz controls by comparing paused canvas pixels.
…bar families The size control keeps Small/Medium/Large and adds an exact px field; a preset writes into the field and highlights only while the field holds that size. The sidebar lists families closed, opening the one (and category) that holds the current page, so 461 loaders read as a dozen groups. flicker, gridora and loadersz show their categories in the sidebar too, from one family_categories helper shared with the overview.
Each result shows its loader: the hidden brand-mark copy is cloned, loadersz is created as its own element (its canvases are kept out of the mark), and anything without either, plus library and page rows, shows its family icon. Only rows scrolled into view get one.
2 of 3 tasks
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.
What
Adds the
loaderszfamily:dlc.loadersz.Loader(state=...), 160 canvas loaders from loadersz (MIT), registered on thedlc.Loadingregistry in six categories.<loadersz-loader>web component;ratemaps tospeed,playingtopaused,sizeandcolorpass through. The custom element is registered explicitly so webpack does not tree-shake it.Known limit: theme "auto" follows the OS color scheme, not the site toggle (documented in the Theme control copy and the README).
Checklist
feat: