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

Loader Migration

Fluent UI Northstar (v0) provides the Loader control to allow users to indicate that content is being loaded on the screen. Fluent UI v9 provides a Spinner control with a different API.

Examples

Basic Migration

Basic usage of Loader v0

import { Loader } from '@fluentui/react-northstar';
import React from 'react';

const LoaderV0BasicExample = () => <Loader />;

export default LoaderV0BasicExample;

An equivalent Spinner in v9 is

import * as React from 'react';
import { Spinner } from '@fluentui/react-components';

const SpinnerV9BasicExample = () => <Spinner />;

export default SpinnerV9BasicExample;

Props Mapping

This table maps Loader v0 props to the Spinner v9 equivalent.