From f9eaf2f00517f496d07989f2c600b494b02bf8e2 Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Wed, 8 Dec 2021 00:40:38 +0800
Subject: [PATCH] Updating PulseLoader story format (#12818)

---
 ui/components/ui/pulse-loader/README.mdx              | 11 +++++++++++
 ui/components/ui/pulse-loader/pulse-loader.stories.js |  7 +++++++
 2 files changed, 18 insertions(+)
 create mode 100644 ui/components/ui/pulse-loader/README.mdx

diff --git a/ui/components/ui/pulse-loader/README.mdx b/ui/components/ui/pulse-loader/README.mdx
new file mode 100644
index 000000000..8bd5e4037
--- /dev/null
+++ b/ui/components/ui/pulse-loader/README.mdx
@@ -0,0 +1,11 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import PulseLoader from '.';
+
+# Pulse Loader
+
+Loading indicator with 3 pulsing dots
+
+<Canvas>
+  <Story id="ui-components-ui-pulse-loader-pulse-loader-stories-js--default-story" />
+</Canvas>
diff --git a/ui/components/ui/pulse-loader/pulse-loader.stories.js b/ui/components/ui/pulse-loader/pulse-loader.stories.js
index 58c44a096..ed35145bc 100644
--- a/ui/components/ui/pulse-loader/pulse-loader.stories.js
+++ b/ui/components/ui/pulse-loader/pulse-loader.stories.js
@@ -1,9 +1,16 @@
 import React from 'react';
+import README from './README.mdx';
 import PulseLoader from '.';
 
 export default {
   title: 'Components/UI/PulseLoader',
   id: __filename,
+  component: PulseLoader,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
 };
 
 export const DefaultStory = () => <PulseLoader />;