ContextQMD
Back to Fluentui

Loader component Migration guide

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.mdx

4.40.2-hotfix25.4 KB
Original Source

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Concepts/Migration/from v0/Components/Loader Migration" />

Loader component Migration guide

Loader component is replaced by Spinner component in V9.

Overview:

Before:

tsx
import { Loader } from '@fluentui/react-northstar';
const Component = () => <Loader />;

After:

tsx
import { Spinner } from '@fluentui/react-components';
const Component = () => <Spinner />;

The Spinner in V9 looks slightly different than the Loader in V0 but it is expected.

How to migrate props:

Loader propsmigrate guide
accessibilitysee [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--docs)
as, classNamekeep it as is
variables, styles, designsee [Migrate style overrides](#migrate-style-overrides) in this document
delaynot supported
indicatornot supported
inlineuse mixin `inline`
labelkeep it as is but font styles will be different; use mixin `v0SpinnerLabelStyle` to keep the V0 label font styles. [See example](#./Keep-V0-font-styles)
labelPositionsame prop but different values, see [Migrate labelPosition prop](#./Migrate-labelPosition-props)
secondarychange to `appearance` prop with `inverted` value instead
sizekeep it as is
svgnot supported

* this may be changed Here is comparison for both versions: Sandbox

Migrate style overrides

⚠️ If this is your first migration, please read the general guide on how to migrate styles.

Example for migrate boolean variables:

Before:

tsx
// in COMPONENT_NAME.tsx
import { Loader } from '@fluentui/react-northstar';

export const Component = () => <Loader variables={{ isLoading: true }} />;

// in label-styles.ts
export const labelStyles1 = {
  root: ({ variables: { isLoading } }) => ({
    ...(isLoading && {
      display: 'block',
    }),
  }),
};

After:

tsx
// in COMPONENT_NAME.tsx
import { Spinner } from '@fluentui/react-components';
import { useStyles } from './COMPONENT_NAME.styles.ts';

export const Component = () => {
  const classes = useStyles();
  return <Spinner className={classes.isLoading}></Spinner>;
};

// in COMPONENT_NAME.styles.ts
import { makeStyles, tokens } from '@fluentui/react-components';

export const useStyles = makeStyles({
  isLoading: {
    display: 'block',
  },
});

Migrate labelPosition props

We change the labelPosition values in V9: start from V0 is now before and end from V0 is now after.

The default value is also different: In V0 default labelPosition is below and in V9, the default labelPosition is after.

Before:

tsx
import { Loader } from '@fluentui/react-northstar';
const Component = () => <Loader label="Loading" />;

After:

tsx
import { Spinner } from '@fluentui/react-components';
const Component = () => <Spinner label="Loading" labelPosition="below" />;

Keep V0 font styles

The label font style is also different in V9. Here is a comparison of the default Loader/Spinner with a label:

We added mixin to the repo, so you can easily keep the original label font styles.

tsx
import { Spinner, makeStyles } from '@fluentui/react-components';
import { spinner } from '@fluentui/react-components';

const useSpinnerStyles = makeStyles({
  v0SpinnerLabelStyle: {
    ...spinner.v0SpinnerLabelStyle(),
  },
});

const Component = () => {
  const classes = useSpinnerStyles();
  return <Spinner className={classes.v0SpinnerLabelStyle} label="Loading..." />;
};