[StackOverflowIsBetterThanAnyAI]

Summary

Review of the package with a focus on how easily it can be integrated into and customized in other projects, plus a test setup that catches broken builds before and after publishing.

Bug fixes

• CommonJS build was broken: dist/index.js only contained require("tslib") and require("./FetchLoading"), neither of which is part of the published package. Any consumer using require (Jest, CJS SSR, older Next.js setups) crashed. Cause was module: nodenext in tsconfig.json.
• ESM types: publint reported that the types were interpreted as CJS for import. There is now a separate dist/index.d.mts, and package.json declares "type": "commonjs".
• rgba validation: the regex had an ungrouped alternation, so rgba(…, 1) was rejected while some invalid strings were accepted. The validation is removed (see below).

New features

• size: number (px) or any CSS length; gap, padding and bounce height scale with it.
• center: fills the parent and centers the dots horizontally and vertically.
• className, style and all other div attributes are passed through; FetchLoadingProps is exported.
• theme accepts any CSS color (named colors, hsl(), var(--x), …).
• CSS custom properties --fetch-loading-color and --fetch-loading-size for theming via CSS. Built-in styles use :where(), so consumer CSS always wins.
• prefers-reduced-motion: a gentle fade instead of the bouncing animation.

Dependencies

• Removed @rollup/plugin-node-resolve, @rollup/plugin-commonjs, rollup-plugin-peer-deps-external, rollup-plugin-postcss (styles are now inlined as a <style> element, SSR-safe, "sideEffects": false). This also resolves the two low-severity deepmerge advisories; npm audit reports 0 vulnerabilities.
• Removed react-dom from peerDependencies, the component never uses it.
• Added dev-only react, react-dom, publint and @arethetypeswrong/cli for the tests.
• Added exports field and prepublishOnly (build + all tests).

Tests and CI

• npm test: 16 render tests for both the ESM and the CJS build, resolved through the package's own exports.
• npm run test:types: type checks a consumer file against the published declarations, including @ts-expect-error cases.
• npm run test:package: publint --strict and attw --pack.
• CI runs all of the above for React 18 and 19, then builds a Vite app with the npm pack tarball (instead of yalc) for React 18 and 19 and checks dot count, size, color and animation in Puppeteer.
• A weekly scheduled run tests fetch-loading@latest from npm against the latest React releases.
• Dependabot now also updates GitHub Actions; actions/setup-node bumped to v4.

Docs

README documents the new props, CSS custom properties, reduced motion, a props table and the development scripts. Animated SVG previews live in assets/ and are referenced via raw.githubusercontent.com URLs so they also render on npmjs.com; they only show up once this is merged into main.

Notes for reviewers

• Version is bumped to 0.2.0 (no git tag yet).
• Behavior change: invalid theme values are no longer filtered by validation; the browser ignores invalid CSS and the default color applies.
• No default ariaLabel on purpose, since a fixed English "Loading" is not appropriate for every project.
• Verified locally: all tests pass with React 18.3.1 and 19.3.1, and the integration flow was reproduced with React 18 in a real browser. The new CI workflow itself has not run before this PR.

🤖 Generated with Claude Code

[coderabbitai]

Important

• Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 910bf0e5-114f-404f-b13e-e59a90c54a3f

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn