How do I add an animated Spinner in Storybook?

Question

As above, how do I add an animated Spinner in Storybook? Should I start with importing SVG?

Answer 1

Same as any other component. Here's a quick example of something I use:

import React from 'react';
import { Meta, Story } from '@storybook/react';
import { LoadingIndicator, LoadingIndicatorProps } from '.';

const meta: Meta<LoadingIndicatorProps> = {
  title: 'Loading Indicator example',
  component: LoadingIndicator,
};
export default meta;
const Template: Story<LoadingIndicatorProps> = args => (
  <LoadingIndicator {...args} />
);

export const Default = Template.bind({});
Default.args = {};

You'll probably notice I'm importing a component called LoadingIndicator. This is simply a component which renders an img wrapped by a div container with the source param of the img set to the .svg path.