A spinner is an animated spinning icon that lets users know content is being loaded.
yarn add @atlaskit/spinner#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
4660ec858a305 -
Update React from v16 to v18#102543
497efb1c63b02 -
Migrated from @emotion/react to @compiled/react in order to improve performance, align with
the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
Please note, in order to use this version of @atlaskit/spinner, you will need to ensure that
your bundler is configured to handle .css imports correctly. Most bundlers come with built-in
support for .css imports, so you may not need to do anything. If you are using a different
bundler, please refer to the documentation for that bundler to understand how to handle .css
imports.
For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS.
57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party apps#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
a8bd419fd70b9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.4efd62cdc533 -
SHPLVIII-481: Assign name to default export components to fix quick-fix importsed8b6957789 - Removes
any usage of deprecated legacy theming APIs. These have been superseeded by design tokens.60eed410ccc - [ux]
Adds label prop to add more context for assistive technologies.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.56507598609 - Skip
minor dependency bump9c2b9a0062e - [ux]
Change the design tokens used for spinner from text to icon tokens4ee60bafc6d -
ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add allowedSideEffects
when loading the page.94909536ed2 - Enable
Spinner to be able to hold during an interactiondaab1376ed1 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.45ebe7af434 - Moved to
using declarative entrypoints internally. Public API is unchanged.f0674fc2e61 - Styles
have been rewritten to ensure future compatibility with compiled.19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.#13302
97d5fe7100c -
Instrumented Spinner with the new theming package, @atlaskit/tokens.
Tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
#12654
d2cf99ba208 - [ux]
Fixes two regressions introduced in v15.0.8:
xsmall size variant of Spinner where the Spinner path appeared flipped,
making the rotation look like the axis was off.inline to inline-block in v15.0.8
shifted the spinner down slightly, causing potential flickers when scrollbars appear as content
overflows in very tight layout scenarios. Please note that if you are using a Spinner in the
iconBefore, iconAfter or overlay props of @atlaskit/button to create custom loading
experiences, you are encouraged to move to using our dedicated
LoadingButton component;
this takes care of all UX concerns for you, and ensures a smooth upgrade path for you in the
future.7be17d84c4a - Fix
performance degradation caused by styles being continually re-calculated for the SVG animation.
Fix a bug in which the Spinner was set to inline instead of inline-block. This reverts the
component's layout behavior to version 12.7116601e1b2 - Internal
typing refactored to be readable by extract-react-types.5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.#3885
6c525a8229 - Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
954cc87b62 - The readme
and package information has been updated to point to the new design system website.87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534#2137
206be3a0cb - In this
version we made spinner dramatically faster and lighter 🤩
The mounting animation for spinner has been fixed. There are three parts to the mounting spinner animation:
In 12.x the fade in and stretch parts of the animation were broken 😢. These have been fixed in
13.0.0 🤘
See below for information about a codemod we created to automatically upgrade usages of spinner ❤️
There have been a number of breaking changes in 13.0.0.
peerDependency on styled-components@3. Internally spinner is now
using @emotion/core for stylingref prop which returns the ref of the spinner svg using React.forwardRefappearance="invert"
will now invert the colors of the spinner in dark mode. Previously appearance="invert" in dark
mode did nothing.delay prop value has been reduced from 100ms to 0ms. The delay was previously
designed to prevent the spinner from flickering if async content becomes quickly visible. Now
that the fade in animation is working correctly, the spinner is only 2% visible at 100ms.delay prop is no longer useful to prevent "quick flickering" so the default has been
changed. We have created a guide to assist you with better understanding how to use delays, as
well as provided new guidance on how to cross fade a spinner with other loading content.invertColor={boolean} prop has been renamed to appearance="inherit | invert" to bring it
into line with other components. This is useful when you are displaying a spinner on a
background that is not the same background color scheme as the body.SpinnerSizes type to Size. Most people are not using this type directlyisCompleting and onComplete props have been removed. Spinner no longer manages it's own
unmount animations. If you want to have graceful unmounting we now have a recommended pattern
which leverages our general purpose and performant @atlaskit/motion package. (Note: spinner
will always animate itself in, you don't need to set anything up).# You first need to have the latest spinner installed before you can run the codemod
yarn upgrade @atlaskit/spinner@^13.0.0
# Run the codemod cli
# Pass in a parser for your codebase
npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]
13.0.0 before you run the codemod cli. This is because the
cli will look in your local node_modules for the codemod which is published inside the
spinner package.What the codemod will do:
delay: replace literal number values equal to or less than 150ms as they are no longer needed
to avoid flickering- <Spinner delay={0} />
+ <Spinner />
- <Spinner delay={100} />
+ <Spinner />
- <Spinner delay={150} />
+ <Spinner />
// no change
<Spinner delay={151} />
<Spinner delay={myValue} />
invertColor: automatically changed over to appearance="inherit | invert". All existing logic
will be preserved in your code- <Spinner invertColor />
+ <Spinner appearance="invert" />
- <Spinner invertColor={false} />
+ <Spinner />
- <Spinner invertColor={true} />
+ <Spinner appearance="invert" />
- <Spinner invertColor={expression} />
+ <Spinner appearance={expression ? "invert" : "inherit"} />
isCompleting and onComplete: removing props. But it will not remove the state or functions
associated with those props. We cannot automatically remove the values or control flow
associated with these props. If you were using isCompleting or onComplete props there will
be manual intervention required.function App() {
const [isCompleting] = useState(false);
const onComplete = () => {};
- return (
- <Spinner
- isCompleting={isCompleting}
- onComplete={() => {
- console.log('on complete!');
- onComplete();
- }}
- delay={1000}
- />
- );
+ return <Spinner delay={1000} />;
}
If you were using onComplete for control flow, we now recommend using the performant and
standard @atlaskit/motion solution
import React, { useState } from 'react';
import Spinner from '@atlaskit/spinner';
import appLoaded from './control-flow';
function App() {
const [isLoading, setIsLoading] = useState(true);
// faking the end of a loading event
useEffect(() => {
const id = setTimeout(() => setIsLoading(false), 1000);
return () => clearTimeout(id);
}, []);
return <Spinner isCompleting={!isLoading} onComplete={appLoaded} />;
}
import React, {useState} from 'react';
import Spinner from '@atlaskit/spinner';
import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
import appLoaded from './control-flow';
function App() {
const [isLoading, setIsLoading] = useState(true);
// faking the end of a loading event
useEffect(() => {
const id = setTimeout(() => setIsLoading(false), 1000);
return () => clearTimeout(id);
}, []);
const onFinish = useCallback((state) => {
if(state === 'exiting') {
appLoaded();
}
}, []);
return (
<ExitingPersistence>
{isLoading && (
<FadeIn onFinish={onFinish}>
{props => (
<span {...props}>
<Spinner size="xlarge" />
</span>
)}
</FadeIn>
)}
<ExitingPersistence>
);
}
SpinnerSizes type: automatically shifted over to a new name: Size54a9514fcf - Build and
supporting files will no longer be published to npm206be3a0cb - In this
version we made spinner dramatically faster and lighter 🤩
The mounting animation for spinner has been fixed. There are three parts to the mounting spinner animation:
In 12.x the fade in and stretch parts of the animation were broken 😢. These have been fixed in
13.0.0 🤘
See below for information about a codemod we created to automatically upgrade usages of spinner ❤️
There have been a number of breaking changes in 13.0.0.
peerDependency on styled-components@3. Internally spinner is now
using @emotion/core for stylingref prop which returns the ref of the spinner svg using React.forwardRefappearance="invert"
will now invert the colors of the spinner in dark mode. Previously appearance="invert" in dark
mode did nothing.delay prop value has been reduced from 100ms to 0ms. The delay was previously
designed to prevent the spinner from flickering if async content becomes quickly visible. Now
that the fade in animation is working correctly, the spinner is only 2% visible at 100ms.delay prop is no longer useful to prevent "quick flickering" so the default has been
changed. We have created a guide to assist you with better understanding how to use delays, as
well as provided new guidance on how to cross fade a spinner with other loading content.invertColor={boolean} prop has been renamed to appearance="inherit | invert" to bring it
into line with other components. This is useful when you are displaying a spinner on a
background that is not the same background color scheme as the body.SpinnerSizes type to Size. Most people are not using this type directlyisCompleting and onComplete props have been removed. Spinner no longer manages it's own
unmount animations. If you want to have graceful unmounting we now have a recommended pattern
which leverages our general purpose and performant @atlaskit/motion package. (Note: spinner
will always animate itself in, you don't need to set anything up).# You first need to have the latest spinner installed before you can run the codemod
yarn upgrade @atlaskit/spinner@^13.0.0
# Run the codemod cli
# Pass in a parser for your codebase
npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]
13.0.0 before you run the codemod cli. This is because the
cli will look in your local node_modules for the codemod which is published inside the
spinner package.What the codemod will do:
delay: replace literal number values equal to or less than 150ms as they are no longer needed
to avoid flickering- <Spinner delay={0} />
+ <Spinner />
- <Spinner delay={100} />
+ <Spinner />
- <Spinner delay={150} />
+ <Spinner />
// no change
<Spinner delay={151} />
<Spinner delay={myValue} />
invertColor: automatically changed over to appearance="inherit | invert". All existing logic
will be preserved in your code- <Spinner invertColor />
+ <Spinner appearance="invert" />
- <Spinner invertColor={false} />
+ <Spinner />
- <Spinner invertColor={true} />
+ <Spinner appearance="invert" />
- <Spinner invertColor={expression} />
+ <Spinner appearance={expression ? "invert" : "inherit"} />
isCompleting and onComplete: removing props. But it will not remove the state or functions
associated with those props. If you where using those props there will be manual intervention
required. We cannot reasonably trace back and remove these values as they could be used for
other purposes.NOTE: values associated with isCompleting and onComplete props are not removed, just the props on the Spinner component
function App() {
const [isCompleting] = useState(false);
const onComplete = () => {};
- return (
- <Spinner
- isCompleting={isCompleting}
- onComplete={() => {
- console.log('on complete!');
- onComplete();
- }}
- delay={1000}
- />
- );
+ return <Spinner delay={1000} />;
}
SpinnerSizes type: automatically shifted over to a new name: Size98f462e2aa - Bumping
use the latest version of @atlaskit/spinner[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[patch]d222c2b987:
Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.
** getTokens props changes ** When defining the value function passed into a ThemeProvider, the
getTokens parameter cannot be called without props; if no props are provided an empty object {}
must be passed in:
<CustomTheme.Provider
value={t => ({ ...t(), backgroundColor: '#333'})}
>
becomes:
<CustomTheme.Provider
value={t => ({ ...t({}), backgroundColor: '#333'})}
>
** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:
import { colors } from '@atlaskit/theme';
colors.colorPalette('8');
to this:
import { colorPalette } from '@atlaskit/theme';
colorPalette.colorPalette('8');
or for multi entry-point users:
import * as colors from '@atlaskit/theme/colors';
colors.colorPalette('8');
to this:
import * as colorPalettes from '@atlaskit/theme/color-palette';
colorPalettes.colorPalette('8');
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[minor]808d37259d:
Adding an optional prop testId that will set the attribute value data-testid. It will help
products to write better integration and end to end tests.
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]b0ef06c685:
[major]215688984e:
[major]7c17b35107:
[patch]d263485853:
[patch]fd940a833b:
[patch]98e11001ff:
[patch]986c5e47c8:
<span> rather than <div> to allow the spinner to be used within <p> style tags[major]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.