LG-4735 feat: creates LoadingSpinner component #3219
Merged
Conversation
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
TheSonOfThomp
requested review from
Copilot and
tsck
and removed request for
a team
There was a problem hiding this comment.
Pull Request Overview
Creates a new @leafygreen-ui/loading-spinner package to provide a lightweight SVG-based spinning loading indicator component. This addresses the need to avoid bundling the heavy Lottie animation library used by the existing loading-indicator package.
- Implements SVG-based spinner with CSS animations for better bundle size
- Provides standard size options (xsmall to xlarge) plus custom pixel sizing
- Includes comprehensive testing utilities and Storybook examples
Reviewed Changes
Copilot reviewed 20 out of 21 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
tools/install/src/ALL_PACKAGES.ts |
Adds the new loading-spinner package to the installation list |
packages/loading-spinner/package.json |
Package configuration with dependencies and build scripts |
packages/loading-spinner/src/LoadingSpinner/LoadingSpinner.tsx |
Main component implementation with SVG rendering |
packages/loading-spinner/src/LoadingSpinner/LoadingSpinner.styles.ts |
CSS-in-JS styles and animations for the spinner |
packages/loading-spinner/src/LoadingSpinner/constants.ts |
Size mappings and helper functions |
packages/loading-spinner/src/testing/getTestUtils.tsx |
Testing utilities for component interaction |
packages/loading-spinner/src/LoadingSpinner.stories.tsx |
Storybook configuration and examples |
packages/loading-indicator/src/index.ts |
Deprecation notice for the existing Spinner component |
.changeset/loading-spinner.md |
Changeset for new package release |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
packages/loading-spinner/src/LoadingSpinner/LoadingSpinner.styles.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
tsck
reviewed
Oct 13, 2025
There was a problem hiding this comment.
Staring at this for too long is dizzying lol.
I think there may be a bit of a timing mismatch. In the lottie spinner, the line always reaches its shortest length at the top of the circle and its longest length I believe at the bottom. If we keep this running for a bit, the shortest point starts to be reached at a point on the circle that moves counter clockwise from the top, indicating that amount of time it takes for the line to expand and collapse isn't exactly the same as the amount of time it takes to go in one loop of the circle.
Screen.Recording.2025-10-13.at.5.31.40.PM.mov
Please correct me if I'm wrong and my eyes are just playing tricks on me! 😅
Ah, good catch! You're right, they are more aligned than I realized. Should be fixed now |
🦋 Changeset detectedLatest commit: fbe7354 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@tsck Do you think this needs a codemod? |
|
Size Change: +599 B (+0.04%) Total Size: 1.6 MB
ℹ️ View Unchanged
|
Given that we're removing props and changing the name of another ( |
tsck
approved these changes
Oct 14, 2025
Yeah I wasn't sure about that either. I was just ballpark-ing off the old one. I can speed it up a touch |
|
@tsck I noticed that the previous sizes didn't match Figma. Updated those in the latest commit Updates sizing to match Figma |
tsck
approved these changes
Oct 15, 2025
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.
✍️ Proposed changes
'@leafygreen-ui/loading-indicator': major
LG-4735
The
Spinnercomponent has been re-written as a lightweight SVG-based spinning loading indicator component, to eliminate the use of Lottie player (a heavy run-time animation library).Importing
Spinnercomponent from the package root is not recommended, since this will also bundle the heavyPageLoadercomponent, which still uses Lottie player.For simple loading spinners, prefer importing the spinner directly from
@leafygreen-ui/loading-indicator/spinnerProp changes:
displayOption(andsizeOverride) prop with a singlesizeprop. The size mapping has also been updated to reflect the Figma spec.baseFontSizepropdescriptionprop.